如何制作 CSS3 剪辑路径答案

【问题标题】：How to make a CSS3 Clip Path如何制作 CSS3 剪辑路径
【发布时间】：2015-09-15 17:40:57
【问题描述】：

我想做图1

如图2

使用剪辑路径，可以吗？

谢谢。

【问题讨论】：

看看这个 - stackoverflow.com/questions/23758922/transparent-arrow-triangle/…。产生的输出与您需要的相似，即使它不使用剪辑路径。除非您打算使用 SVG 剪辑路径，否则我会推荐链接线程中描述的方法，因为仅 CSS 剪辑路径对浏览器的支持非常低。

标签： css svg clip-path

【解决方案1】：

clip-path 仍然是一个非常实验性的 CSS3 元素，因此没有得到很好的支持，而且支持很少。

使用 CSS3 clip-path 元素生成多边形仅允许直角作为其所有点，而不是允许曲线。

这是一个例子：

body {
  background: #555;
  margin: 0;
}
img {
  -webkit-clip-path: polygon(98% 0, 100% 2%, 100% 88%, 98% 90%, 25% 90%, 20% 99%, 15% 90%, 2% 90%, 0 88%, 0 2%, 2% 0);
  clip-path: polygon(98% 0, 100% 2%, 100% 88%, 98% 90%, 25% 90%, 20% 99%, 15% 90%, 3% 90%, 0 88%, 0 2%, 2% 0);
}

&lt;img src="http://lorempixel.com/200/200/" /&gt;

您最好的选择是使用实际的 SVG 元素并在 CSS 中引用它来进行剪切。如果你想要一个完美的形状，但遗憾的是不支持 IE，这就是要走的路。

SVG Only Version

body {
  background: #555;
  margin: 0;
}
img {
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
    </clipPath>
  </defs>
</svg>

<img src="http://lorempixel.com/500/500/" />

【讨论】：