Search code examples
csssvgclip-path

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

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://codepen.io/andystent/pen/OJyNdmB

And here is an image for quick reference:

Screenshot from CodePe results for quick reference

In this example the "Top" and "Left" triangles are IMAGES with the clip-path applied and displaying perfectly.

The "Right" triangle (with the red background) is a DIV with the clip-path applied but the proportions are wrong.

It should look like a mirrored version of the "Left" triangle.

When I apply it to an image it is perfect but when I apply to the div it is not. What is the best way to do this?

I am new to SVG so it is extremely likely that I am not doing this correctly. I have looked at numerous posts and the method I have tried is from a few of those but without success... so now I'm reaching out to you geniuses...

Here's the HTML and CSS for the red "Right" triangle with the clip applied to the DIV in the CSS:

#right-wrapper {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  padding: 40px 20px;
  box-sizing: border-box;
}

#right-content-div {
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  clip-path: url(#clip-path-right);
  -webkit-clip-path: url(#clip-path-right);
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="right-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 1220 1214" preserveAspectRatio="none">
<defs>
  <clipPath id="clip-path-right">
    <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
    </path>
  </clipPath>
</defs>
<div id="right-content-div" preserveAspectRatio="none">
  <h1>test heading</h1>
</div>
<!--      <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" /> -->
  </svg>
</div>

----- UPDATE: -----

As suggested in the comments, I have created a simplified Pen that gets to the heart of what I'm trying to achieve and the embedded HTML and CSS is below.

Essentially I am trying to get the red <div> to be clipped exactly like the <image>.

https://codepen.io/andystent/pen/RwWRjLd

#right-content-div {
  background-color: red;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  clip-path: url(#clip-path-right);
  -webkit-clip-path: url(#clip-path-right);
}
 <svg width="20%" height="20%" viewBox="0 0 1220 1214">
<defs>
  <clipPath id="clip-path-right">
    <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
    </path>
  </clipPath>
</defs>
   
 <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" />
  </svg>
  
   <div id="right-content-div" preserveAspectRatio="none">
  <h1>test heading</h1>
</div>

Solution

  • 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,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
          mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
}
    <div class="box mask"></div>
<div class="box mask" style="width:300px;"></div>
<div class="box mask" style="height:300px;"></div>
<img src="https://i.picsum.photos/id/1074/200/200.jpg" class="mask">