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.

<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="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.

<div class="clip-this" style="background:red; height: 200px; width: 200px;"></div>

<!-- this lets Firefox display the angle -->
<svg class="clip-svg">
	<defs>
		<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
			<polygon points="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%, 0 100%);
	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%, 0 100%);
  clip-path: url("#swipe__clip-path");

}

 <div id="clip-this"></div>
    
    <!-- this lets Firefox display the angle -->
    <svg class="clip-svg">
    	<defs>
    		<clipPath id="swipe__clip-path" clipPathUnits="objectBoundingBox">
    			<polygon points="0.404 0, 1 0, 1 1, 0 1" />
    		</clipPath>
    	</defs>	
    </svg>