0

I have created a right pointing content box using css clip-path polygon, It works well inside chrome, For firefox I have added Inline SVG, but still it is not working.

Here is work in progress link

Link

Here is the markup and code I used for creating the right pointing content box

HTML : 

<svg width="0" height="0">
   <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 0.95 0, 1 0.5, 0.95 1, 0 1" />
    </clipPath>
   </defs>
</svg>
<div class="application-content">
   <h3>clip-path is not working in firefox</h3>
   <p>Hi, I have created a right pointing content box using css clip-path polygon, It works well inside chrome, For firefox I have added Inline SVG, but still it is not working.</p>
</div>

CSS:

.application-content{
  width:35%;
  -webkit-clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
  clip-path: url("#clip-shape");
  background-color:#f5f5f5;
  padding:30px;
}

I don't know, where it is going wrong.

Interesting thing here is, The above code is working when used with jsfiddle or codepen. I am using latest version of wordpress with a custom code theme.

Here is the codepen link

Naresh Devineni
  • 111
  • 6
  • I had a similar issue. Check this question and answer that I posted: http://stackoverflow.com/questions/31202373/animation-for-svg-path-within-clip-path-doesnt-work-in-mozilla Let me know if it helped. – shet_tayyy Nov 14 '16 at 11:30
  • Your codepen is working for me in FF 49.0.2 on Win7. – Paul LeBeau Nov 14 '16 at 16:13
  • @RaHuL-HouseJavascript .. Sorry I could not follow your example. – Naresh Devineni Nov 14 '16 at 18:12
  • @PaulLeBeau....Thats the problem, It is working in codepen, but not in my project. If it works in codepen then it should work in my project as well, but i dont understand why it is not working. – Naresh Devineni Nov 14 '16 at 18:14

0 Answers0