How do I convert css clip rect() to clipPath?-CodePudding

I have some older code that uses CSS clip. It still works very well but since clip is deprecated I want to switch to using clipPath. The docs sounded like using inset() with the same top right bottom left properties would work, but it doesn't produce the same result. Here's an example:

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 0px; left: 0px; width: 2216px; clip: rect(0px, 50px, 100px, 25px); border: 1px solid red;">

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 125px; left: 0px; width: 2216px; clip-path: inset(0px 50px 100px 25px);  border: 1px solid red;">

https://jsfiddle.net/39742zoh/

I've searched Google for some time and while there's a lot of good information on how to use clipPath, there's not any information on converting your old clip code to the newer clipPath property.

How would I produce the same clip using clipPath?

Thanks in advance.

CodePudding user response：

"top" and "bottom" for rect() consider the top border as a reference which is different with inset() because for the latter "bottom" will consider the bottom border as a reference. Same logic for "left" and "right"

You need to do the following to get the same result

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 0px; left: 0px; width: 2216px; clip: rect(0px, 50px, 100px, 25px); border: 1px solid red;">

<img src="https://i.ibb.co/0qG5Bzp/stone-wall.jpg" style="position: absolute; height: 554px; top: 125px; left: 0px; width: 2216px; clip-path: inset(0px calc(100% - 50px) calc(100% - 100px) 25px);  border: 1px solid red;">

clip: rect(top, right, bottom, left);

clip-path: inset(top calc(100% - right) calc(100% - bottom) left)