CSS 多邊形圖片是指用 CSS 代碼來創建多邊形形狀的圖片。
CSS 有兩種方式可以實現多邊形形狀的圖片:使用 clip-path 或使用 transform。
/* 利用 clip-path 實現三角形 */ .triangle { width: 0; height: 0; border-style: solid; border-width: 50px 50px 0 0; border-color: #007bff transparent transparent transparent; clip-path: polygon(0 0, 100% 0, 0 100%); } /* 利用 transform 實現菱形 */ .diamond { width: 100px; height: 100px; background-color: #007bff; transform: rotate(45deg); } /* 利用 transform 實現五角星 */ .star { width: 0; height: 0; border: 30px solid; border-color: transparent transparent #007bff transparent; transform: rotate(-45deg); position: relative; top: -50px; left: -50px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
以上是創建三角形、菱形、五角星的示例代碼,大家可以根據自己的需求進行修改和使用。
需要注意的是,clip-path 屬性在某些瀏覽器上可能不支持,特別是在 IE 和 Edge 瀏覽器上。而 transform 屬性則支持較好,但是需要注意兼容性問題。