2

For example, I have a css class with a polygon clip-path applied to it like so: 

   .services-image-left {
    -webkit-clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%);
    clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%); }

But I understand for this to work in Edge and IE I need to use the "clippath" property with svg points. Is there an easy way to convert the above polygon to an svg shape and apply it to everything with the .services-image-left class like the above sample?

AndrewCoCo
  • 153
  • 1
  • 2
  • 12

1 Answers1

5

The conversion is pretty easy. The equivalent of that CSS clip path would be:

<svg width="0" height="0">
  <clipPath id="myclippath" clipPathUnits="objectBoundingBox">
    <polygon points="0, 0, 0.97, 0, 0.83, 1.0, 0, 1.0"/>
  </clipPath>
</svg>

Then you reference it with:

.services-image-left {
  clip-path: url(#myclippath);
  ...
}
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • 1
    Thank you! Is there a way I can add that code to my CSS styles? Or is there another way to implement that? – AndrewCoCo Jun 13 '18 at 19:08
  • 1
    No. The SVG clip path definition must be in a `` in your page. But you **can** apply it to a class in a CSS rule (as I have shown above). – Paul LeBeau Jun 14 '18 at 19:48
  • So pretty much I need to add your first code snippet somewhere on the page (just pasted somewhere?) and then add the 2nd code snippet to my CSS? – AndrewCoCo Jun 15 '18 at 20:34
  • Yes. clip path needs to be in an `` tage (answer updated). Then update your CSS rule. Add the `clip-path` for the SVG one, before the others. – Paul LeBeau Jun 16 '18 at 07:19
  • 1
    I still can't see this working on Edge. If anyone has any idea what I'm doing incorrect please let me know: https://codesandbox.io/s/clip-path-with-ieedge-support-tukrk?file=/src/App.js – Fiddle Freak Nov 01 '20 at 00:17
  • @FiddleFreak It seems to be working on Edge for me. The `div-intro-bottom` div is clipped into an 'M' shape leaving the white background showing through as a triangle at the top. My Edge is version 86.0.622.58. – Paul LeBeau Nov 01 '20 at 06:30
  • yeah, I'm using an earlier edge version that doesn't use chromium. The same issue would happen for IE. There are some systems that are older and I want to make sure I'm supporting those. – Fiddle Freak Nov 01 '20 at 14:14
  • Ah. Then I'm afraid you are going to have to use a different method. Such as an SVG background - instead of clipping a div. – Paul LeBeau Nov 02 '20 at 03:16