在不使用JavaScript 的情況下使用CSS 建立自訂形狀可能是一項挑戰,尤其是在追求像素完美精度時。一項常見任務是創建一個三角圓角三角形,可以使用多種技術來實現。
純CSS 解決方案:
實現三角- 使用純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 變換、傾斜和縮放來建立所需的形狀。它提供像素完美的精度,並且相對直觀易懂。
以上是如何僅使用 CSS 建立一個三角圓角三角形?的詳細內容。更多資訊請關注PHP中文網其他相關文章!