SVG ClipPath: Why does applying the clip path to a DIV have different results to an IMAGE?

Question

I need to create a set of 3 triangles that each have content in them (images, copy, etc).

I have setup this Pen to show roughly what I\'m trying to achieve: https://

Answer 1

Here is an idea where I will be using mask instead of clip-path. The main trick to correctly set the viewBox (you already have it in your code) add preserveAspectRatio="none" then have a mask size of 100% 100%

.box {
  width:200px;
  height:200px;
  display:inline-block;
  background:red;
}
.mask {
  -webkit-mask:url('data:image/svg+xml;utf8,') 0 0/100% 100%;
          mask:url('data:image/svg+xml;utf8,') 0 0/100% 100%;
}