0

我有一个英雄图像（全宽 / 70% 高度 div 与背景图像），我正在应用蒙版以使下边缘变成一个向下箭头。我使用带有百分比的 css 剪辑路径设置它，因此它可以很好地跨不同的视口大小进行缩放。

-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 可能没有缩放以覆盖英雄图像分区。

<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 的缺点不会对页面产生不好的影响，但在所有浏览器上提供相同的向下滚动鼓励会很好。

4

0 回答 0