在近日的專案中，有用到圖片置於特定的造形之中以遮罩或是裁切的效果呈現畫面，對此將線上看到約得不錯的文章與原理做個記錄。
clip-path 簡介
clip-path 操作概念相近 SVG clip-path 屬性
clip-path 為 CSS 專屬剪裁屬性，概念相近於 SVG 的 clip-path 元素與相關屬性。在近代瀏覽器的使用上，基本上相容性是算夠的，在寫這篇筆記的時間為 20240621，運用於行動裝置上的瀏覽器大致上也是可以，是個可基於 CSS 做樣式規劃的運用屬性。
原理部份可參考：
– oxxostudio – 運用 clip-path 的純 CSS 形狀變換 – 使用 clip-path 繪製多邊形
– 張鑫旭-鑫空間-鑫生活 – CSS3/SVG clip-path路徑剪裁遮罩屬性簡介 – 三、CSS中的clip-path
CSS clip-path 的基本屬性：圓形 circle、橢圓形 ellipse、多邊形 polygon、內置矩形 inset
clip-path 主要透過繪製方法配合對應的參數操作。
- 圓形 circle
- 橢圓形 ellipse
- 多邊形 polygon
- 內置矩形 inset
See the Pen Untitled by Jimmy_Wu (@Jimmy_Wu) on CodePen.
clip-path 運用
預設呈現樣式、容器內置圖文、背景色與背景圖
以 clip-path 建立基本型，
沒指定大小，基本上是 0px，透過 CSS 屬性設定寬度，指定高度與寬度，以設定的高寬值做比例變形呈現。
在沒有指定背景色或是背景圖片，會預設是透明的。
在裁切出來的造形上，可以在包圖片或是文字於容器內。
也可以透過 CSS 的圖片圖片做為程現樣式。
See the Pen Untitled by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <h3>clip-path 元素預設大小與使用背景色 (1.0px / 2.指定高寬 / 3.最用背景色)</h3> <div class="clip clip--star"></div> <div class="clip clip--star clip--sm"></div> <div class="clip clip--star clip--sm clip--red"></div> <hr> <h3>clip-path 元素使用背景圖片</h3> <div class="clip clip--star clip--xl clip--bgImg"></div> <hr> <h3>clip-path 元素內指入 img 圖片元素，透過 Flex 排版</h3> <div class="clip clip--star clip--xl flex align--end"> <img class="rwdImg" src="https://images.unsplash.com/photo-1718049719688-764249c6800d?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"> </div> 使用圖片： <img class="rwdImg" src="https://images.unsplash.com/photo-1718049719688-764249c6800d?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"> --> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | body { background-color: #e6e6e8; } .clip { display: inline-block; min-width: 50px; min-height: 50px; &--sm { width: 100px; height: 100px; } &--xl { height: 500px; width: 500px; } &--red { background-color: red; } &--star { clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } &--bgImg { background-position: bottom; background-size: cover; background-repeat: no-repeat; background-image: url('https://images.unsplash.com/photo-1718049719688-764249c6800d?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); } } .rwdImg { max-width: 100%; height: auto; } .flex { display: flex; } .align--end { align-items: end; } |
以 hover 效果變換星形
See the Pen Untitled by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1 | <div class="clip clip--xl clip--star clip--starHover clip--bgImg"></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | body { background-color: #ccc; } .clip { display: inline-block; min-width: 50px; min-height: 50px; &--xl { height: 500px; width: 500px; } &--star { clip-path: polygon( 51% 20%, 61% 35%, 80% 41%, 68% 57%, 71% 76%, 50% 70%, 30% 76%, 32% 57%, 21% 40%, 39% 35% ); } &--starHover { transition: all 0.5s; &:hover { transition: all 0.5s; clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); } } &--bgImg { background-position: bottom; background-size: cover; background-repeat: no-repeat; background-image: url("https://images.unsplash.com/photo-1718049719688-764249c6800d?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"); } } |
參考資料
線上工具