Issue
I have a div which I am applying an svg clip path to. It is basically putting a consistent angled edge at the left side of the div. The svg clip path is oversized as it will apply to different heights of div's.
The clip-path positioning starts at the top of the div so it get's clipped off at the side.
Is it possible for the clip path to start at the bottom left of my div to the angle always starts at the bottom left of the div.
My current html is:
<div class="box">
</div>
<svg width="0" height="0">
<defs>
<clipPath id="sideimgclip" transform="translate(0 0)">
<polygon class="a" points="0 686.89 396.58 0 1200 0 1200 686.89 0 686.89"/>
</clipPath>
</defs>
<g class="b"><polygon class="c" points="1200 686.89 0 686.89 0 0 1200 0 1200 686.89"/></g>
</svg>
And the css:
.box{ width:650px; height:450px; background:#c00;
-webkit-clip-path: url(#sideimgclip);
clip-path: url(#sideimgclip);
}
Here is a link to a jsfiddle: https://jsfiddle.net/mmc501/85tfb12L/2/
Solution
If you use the CSS polygon() function as a source of the clip-path
, you can use units and the calc()
function when defining the shape. Do this:
.box {
clip-path: polygon(0 100%, 400px calc(100% - 800px), 100% 0, 100% 100%);
}
.example {
width: 400px;
height: 200px;
background: grey;
}
<div class="box example"></div>
As long as the px
values ensure the second vertex computes to a point outside the bounding box, the result is a consistent-angled left edge.
Answered By - ccprog
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.