CSS - 剪辑路径在 safari 上效果不佳答案

【问题标题】：CSS - Clip-path doesn't work well on safariCSS - 剪辑路径在 safari 上效果不佳
【发布时间】：2017-11-20 19:51:22
【问题描述】：

我正在开发一个有形状的菜单，但在 Safari 中效果不佳。在 Safari 中它会损坏布局，我不知道为什么。如果我不使用 svg 标签而只使用 css 剪辑路径，它在 safari 和 chrome 中运行良好，但在 firefox 中运行良好。

CSS：

   .menu {
  width: 65%;
  height: 40px;
  background-color: red;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
  position: absolute;
  right: 0px;
  bottom: 0;
}

.menu:before {
  content: '';
  width: 99.8%;
  height: 40px;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  -webkit-clip-path: url("#clipping");
  clip-path: url("#clipping");
  background: black;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
}

html:

<div class="menu">
 <svg width='0' height='0'>
  <defs>
    <clipPath id="clipping" clipPathUnits="objectBoundingBox">
     <polygon points="0.05 0, 1 0, 1 1, 0 1, 0 1" />
    </clipPath>
  </defs>
 </svg>
</div>

谢谢

【问题讨论】：

部分支持是指支持内联 SVG 的形状和 url(#foo) 语法，但不支持外部 SVG 中的形状。 caniuse.com/#search=clip-path
那么，我该怎么做呢？ @Rob
2020 年，Safari (13.1) 中的剪辑路径仍然存在问题且速度缓慢。至少现在支持不带前缀。

标签： html css cross-browser css-shapes

【解决方案1】：

safari (webkit) 和大多数边缘版本不支持clip-path css 属性。

【讨论】：

那么，解决方案是什么？ @VolkanSağ
为什么要剪辑div？您可以使用所需的 svg 路径绘制任何设计。
如果要剪辑，应该用css创建一个div-> overflow: hidden;位置：相对；在这里面，你应该创建一个 div position: absolute;和你想要的左边和顶部:)

【解决方案2】：

它在 Safari 中对我有用

 <svg viewBox="0 0 250 250">
  <polygon points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
  <polygon points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
  <path d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
      L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg>

【讨论】：

如果我得到 css clip-path: url() 它在 safari 中工作正常，但在 firefox 中不起作用。 @AbdullahKanza