使用CSS 實現三角圓角三角形
在本文中，我們將解決創建自訂顏色三角形的挑戰使用純CSS 的圓角三角形，無需JavaScript 或HTML5 畫布支援。
問題陳述
目標是創建如下所示的形狀，而不訴諸圖像疊加或基於 JS 的技術。
[三角形圓角的圖像三角形]
解決方案
這是一個優雅的CSS 解決方案，靈感來自作者最初的想法：
.triangle {
position: relative;
background-color: orange;
text-align: left;
}
.triangle:before,
.triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
width: 10em;
height: 10em;
border-top-right-radius: 30%;
}
.triangle {
transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}
.triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}
.triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}說明
此解決方案結合了多種 CSS 轉換來實現所需的效果shape:
最終結果是一個像素完美的三角圓角三角形，完全使用 CSS 製作。
以上是如何僅使用 CSS 建立三角圓角三角形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
