不規則圖片顯示（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%);
}