Clip-path Doesn't Work In Firefox [% Values]

I am trying to run svg clip-path in mozilla but it doesn't work. .mask-1 { -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); clip-path: polygon(0% 0%, 58% 0%

Solution 1:

You can use an inline SVG (as the code below shows) in Firefox, where your points are the percentage / 100. Because of the attribute clipPathUnits the mask will be responsive.

<svgwidth="0"height="0"><defs><clipPathid="clip-shape"clipPathUnits="objectBoundingBox"><polygonpoints="0 0, 0.58 0, 0.39 0.818, 0 0.818" /></clipPath></defs></svg>

Refer to the svg like

.mask-1 {
   -webkit-clip-path: polygon(0%0%, 58%0%, 39%81.8%, 0%81.8%);
   clip-path: polygon(0%0%, 58%0%, 39%81.8%, 0%81.8%);
   -webkit-clip-path: url("#clip-shape"); 
   clip-path: url("#clip-shape");
}

I struggled extensively with this, since my svg was dynamically added to the page. Applying the clip-path css-property with a delay (or pageload) via js solved my problems in FF.

There is no support in IE by my knowledge.

Solution 2:

I've also struggled a lot with this. I'm covering similar ground as the above answer, but a solution I found was to add the CSS inline using a Style tag. It's ugly, but works at least.

<divclass="clip-this"style="background:red; height: 200px; width: 200px;"></div><!-- this lets Firefox display the angle --><svgclass="clip-svg"><defs><clipPathid="swipe__clip-path"clipPathUnits="objectBoundingBox"><polygonpoints="0.404 0, 1 0, 1 1, 0 1" /></clipPath></defs></svg><style>.clip-this {
	clip-path: polygon(40.4%0, 100%0, 100%100%, 0100%);
	clip-path: url("#swipe__clip-path");

}
</style>

Solution 3:

In addition to @atomictom's answer I have found that if you change the div's class to an id then you won't have to inline the CSS

body{ 
  background: lightgreen;
}
#clip-this {
  background:red; 
  height: 200px; 
  width: 200px;
  clip-path: polygon(40.4%0, 100%0, 100%100%, 0100%);
  clip-path: url("#swipe__clip-path");

}

<divid="clip-this"></div><!-- this lets Firefox display the angle --><svgclass="clip-svg"><defs><clipPathid="swipe__clip-path"clipPathUnits="objectBoundingBox"><polygonpoints="0.404 0, 1 0, 1 1, 0 1" /></clipPath></defs></svg>