Question

我使用css clip-path polygon创建了一个正确的指向内容框，它在chrome内部运行良好，对于firefox，我添加了Inline SVG，但它仍然无效。

这是正在进行的工作链接

以下是我用于创建正确指向内容框的标记和代码

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;
}

我不知道哪里出错了。

有趣的是，上面的代码在与jsfiddle或codepen一起使用时正常工作。我正在使用最新版本的wordpress和自定义代码主题。

以下是codepen link

即使在使用内联SVG作为源后，clip-path也无法在firefox中运行

0 个答案: