CSS - 在剪辑路径多边形上添加边框颜色答案

【问题标题】：CSS - Add border color on clip path polygonCSS - 在剪辑路径多边形上添加边框颜色
【发布时间】：2017-01-23 18:20:10
【问题描述】：

我第一次使用剪辑路径，我需要在这个形状中添加一个边框。任何人都可以解释我如何做到这一点？

.image-center {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.shape {
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
  clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
}
img {
  width: 300px;
  height: 300px;
}

<div class="image-center">
  <div class="shape">
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" />
  </div>
</div>

【问题讨论】：

重复this SO问题

标签： css sass clip-path

【解决方案1】：

您可以使用多个投影过滤器来伪造它。支持不多，但是cli路径也没有太多...

.image-center {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  -webkit-filter: drop-shadow(2px 2px 0px red)
    drop-shadow(2px -2px 0px red)
    drop-shadow(-2px 2px 0px red)
    drop-shadow(-2px -2px 0px red);
  filter: drop-shadow(2px 2px 0px red)
    drop-shadow(2px -2px 0px red)
    drop-shadow(-2px 2px 0px red)
    drop-shadow(-2px -2px 0px red);
}
.shape {
  width: 300px;
  height: 300px;
  -webkit-clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
  clip-path: polygon(15% 0, 70% 0, 100% 50%, 70% 100%, 15% 100%, 0 70%, 20% 50%, 0% 30%);
}
img {
  width: 300px;
  height: 300px;
}

<div class="image-center">
  <div class="shape">
    <img src="http://www.businessadvisorsmd.com/wp-content/uploads/2016/01/masteraccounting-1.jpg" />
  </div>
</div>

【讨论】：

谢谢。我怎么能在Firefox中做到这一点？呈现与主流浏览器兼容的方式的最佳解决方案是什么？ @vals
很高兴它有帮助。使用 SVG 可以获得更好的支持。如果您使用 SVG，还有一种更好的方法来获得边框效果。请参阅 Jeroen Heier 链接的问题中的第二个答案