Question

我有一个英雄形象（全宽/ 70％高度div与背景图像）我正在应用一个蒙版使下边缘成为一个向下箭头。我使用带有百分比的css clip-path进行设置，以便在不同的视口大小上很好地缩放。

-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 50% 100%, 0% 96%);
clip-path: polygon(0% 0%, 100% 0%, 100% 96%, 50% 100%, 0% 96%);

它在Chrome等兼容浏览器中的表现如预期，但当然在Firefox中失败。我正在尝试创建一个svg来使用Firefox应该遵守的url（）函数。但是已经敲定了。

据我所知，svg不能使用百分比，所以尝试使用0.0 = 0％，1.0 = 100％和0.XX之间的所有内容，但这似乎不起作用或者svg可能没有扩展到覆盖英雄形象div。

<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 0, 1.0 0, 1.0 0.96, 0.5 1.0, 0 0.96" />
    </clipPath>
  </defs>
</svg>

有没有办法将这些基于百分比的css多边形转换为可在Firefox中运行的svg？还有什么技巧可以让它在不同的视口中扩展？（最好不用添加JS，绝对没有jQuery）

虽然Firefox的缺点不会对页面产生不良影响，但在所有浏览器上提供相同的向下滚动鼓励会很不错。

为Firefox创建svg剪辑路径多边形，模仿Chrome上使用的css剪辑路径多边形

0 个答案: