CSS SVG Clip Path positioning - start bottom left-CodePudding

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 >

</div>


<svg width="0" height="0">
    <defs>
    
    <clipPath id="sideimgclip"  transform="translate(0 0)">
    <polygon  points="0 686.89 396.58 0 1200 0 1200 686.89 0 686.89"/>
    </clipPath>
    </defs>
    <g ><polygon  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/

CodePudding user response：

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 ></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.