如何用css實現弧度圓角?三角形以及圓形?

css是樣式列表,好的樣式可以簡化程式碼,提升使用者體驗。本文主要從幾個程式碼的變化來實現矩形圓角以及三角形和圓形。

如何用css實現弧度圓角?三角形以及圓形

工具/原料

dw

方法/步驟

用css畫矩形圓角 ,需要使用到border-radius這個屬性,下圖四角圓,程式碼顯示如下:border-radius:60px; width:360px; height:200px; border:#900 1px solid;margin:20px 20px;

如何用css實現弧度圓角?三角形以及圓形

也可以通過控制border-radius的屬性,將左上角為弧形和右下角為弧形,主要為border-top-left-radius 和border-bottom-right-radius.

如何用css實現弧度圓角?三角形以及圓形

當border-radius數值和width,height等達到某一關係的時候,可以直接顯示圓形。border-radius:400px; width:200px; height:200px; border:#900 1px solid;

如何用css實現弧度圓角?三角形以及圓形

如果要做三角形,則需要從border的transparent著手,例如下圖border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

如何用css實現弧度圓角?三角形以及圓形

其實,border-left: 50px solid transparent; 的寬度直接影響著三角形的形狀,如將上述變成border-left: 150px solid transparent; 得出的圖形如下

如何用css實現弧度圓角?三角形以及圓形

根據border的transparent的一些屬性,可以控制箭頭的朝向。做出上箭頭,下箭頭,左箭頭和右箭頭,具體如下圖。

如何用css實現弧度圓角?三角形以及圓形

注意事項

css多用,你會發現其實css功能很強大

程式碼, 三角形, 圓形, 圓角, 弧度,
相關問題答案