CSS可以實現不規則三角形,讓我們來看一下具體的實現方式:
.triangle { width: 0; height: 0; border-style: solid; border-width: 20px 0 0 20px; border-color: transparent transparent transparent #007bff; }
上面的代碼中,定義了一個class名為triangle的元素,接下來詳細介紹每個屬性的作用:
width:由于實現不規則三角形需要給元素添加邊框,所以在設置完邊框后需要將元素的寬度設置為0,否則會出現元素撐開的情況。
height:同樣的,實驗中事先將元素的高度設置為0。
border-style:三角形的形狀是通過邊框的樣式來實現的。這里可以使用solid、dashed、dotted、double等樣式,可以根據需求自行選擇。
border-width:決定了每條邊框的寬度,由于實現的是三角形,所以將底邊和左邊的寬度分別設置為0即可。
border-color:為邊框設置顏色,由于實現的是不規則三角形,所以三角形的左邊和底部的顏色分別設置為transparent,右邊的顏色可以自定義。
以上是實現不規則三角形的代碼,通過調整border-width的值可以制作出各種不同形狀的三角形,如等邊三角形、鈍角三角形等等。
上一篇網頁css樣式表單樣式
下一篇html25%灰色代碼