用CSS程式碼繪製三角形 純CSS繪製三角形的程式碼
阿新 • • 發佈：2019-01-02
這段時間想用css寫出如下的三角形
經查閱可以使用div的border實現，將div的高度和寬度設定為0然後設定該div的border的大小，和顏色即可顯示出如圖的樣式
1、新建一個元素，如果行內元素就display:block它。
<div class="triangle"></div>
2、把它的寬高設定為height:0px; width:0px;
3、設定邊框border屬性，用來實現三角形。
可以用如下的的css程式碼
.triangle{ display:inline; height:0px; width:0px; border:100px solid #000; border-color:transparent transparent transparent #00A5A5; border-style:solid solid solid dashed; line-height:0px; }
附原始碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin:0px; padding:0px;} .triangle{ display:inline; height:0px; width:0px; border:100px solid #000; border-color:transparent transparent transparent #00A5A5; border-style:solid solid solid dashed; line-height:0px; float:left; } .fang{ display:inline; height:0px; width:0px; border:100px solid #000; border-color:#00A5A5 #00A5A5 #00A5A5 #00A5A5; border-style:solid solid solid solid; line-height:0px; float:left; } </style> </head> <body> <div> <div class="fang">demodemo</div> <div class="triangle"></div> </div> </body> </html>