天天看點

css裁剪圖檔 clip-path

clip-path 屬性使用裁剪方式建立元素的可顯示區域。區域内的部分顯示,區域外的隐藏。可以指定一些特定形狀。

https://bennettfeely.com/clippy/ 用谷歌搜尋 該網站可以 用你得圖檔然後移動點擷取你得資料
css裁剪圖檔 clip-path

上面的點可以移動 中間圈住的區域就是展示的區域

clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 75%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);      
.img3 {
      width: 1.415rem;
      height: 1.42rem;
      position: absolute;
      top: 0.7rem;
      right: 0.9rem;
      clip-path: polygon(45% 8%, 96% 0, 90% 53%, 78% 45%, 25% 100%, 2% 76%, 55% 19%);
    }
    //這樣 這張圖檔在頁面上就被裁剪了