優雅的實現 UI 的多邊形

今天閱讀 Team CSS-Tricks 的訂閱郵件，發現一遍文章 Using 「box shadows」 and clip-path together，恰好最近的小程序項目上有個相似的 UI 設計，學習並實踐了一下，非常方便。

需求

一個相似 tag 的樣式，個人實現是使用僞元素 after:

div {
    // ...
    &:after {
        position: absolute;
        top: 0;
        right: -20px;
        transform: rotate(45deg);
        content: ' ';
        width: 0;
        height: 0;
        border: 20px solid @white;
     }
}
複製代碼

而使用 clip-path，只須要一行代碼就搞定：

div {
   //...
   clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
複製代碼

詳解

clip-path 屬性實現了一個顯示剪裁區域的功能。

兼容性

clip-path

polygon

如何剪裁

polygon 它以盒模型的左下角爲座標原點，你定義須要連線的點座標便可：

如盒模型爲 100px 100px，我定義了 5 個點，那麼最終的效果就是依次連線 1～5，裁剪這個封閉區域，而 2-3-4 這個三角形就不顯示了。

div {
    clip-path: polygon(0 0, 100px 0, 50px 50px, 100px 100px, 0 100px);
    // clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%);
}


複製代碼

NOTE: 參數值能夠爲百分比，會以盒模型的寬高爲基準計算。