不规则图片显示（css实现多边形）

需求：怎样才能截取背景图片或者让图片在不规则盒子里面展示？

原图

实现后的效果图

其实要实现这种效果有两种方式：

• 一种是让UI做图的时候就把边框以外的部分设计成与背景色相同的颜色。
  边框图片与内容图片大小一致，正常重叠就好，这样做的优势可以减少代码量，方便服务端维护，不会出现样式兼容问题；缺点也有一些，就是特殊形状的展示不好实现，会多几次图片的请求。
• 另一种就是纯CSS实现，主要是利用css3中的clip-path属性。
  优点就是可以实现任意形状的展示，包括图片、背景色等
  代码如下：

<div className="warp">
  <img src="./irregularity.png"></img>
</div>

.warp {
  background: url(./bj.jpg) no-repeat center;
  background-size: cover;
  clip-path: polygon(0% 8%, 6% 0, 23% 0, 26% 4%, 96% 4%, 100% 10%, 100% 91%, 95% 98%, 6% 98%, 0 90%);
}

clip-path介绍

CMD的简介
clip-path目前浏览器支持情况可以看这里

clip-path的其他应用

如下：三角，四角，五角星，还有移动端的0.5像素

.three-pointed-star {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.four-pointed-star {
  clip-path: polygon(0 50%, 40% 40%, 50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%);
}
.five-pointed-star {
  clip-path: polygon(0 36%, 36% 36%, 46% 0, 56% 36%, 92% 36%, 63% 56%, 73% 92%, 46% 70%, 20.6% 92%, 30% 56%);
}
.line {
  background-color: red;
  height: 1px;
  line-height: 1px;
  margin: 10px;
}
.half-line {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}