純css繪製 三角形 ，箭頭
阿新 • • 發佈：2018-11-21
1.通過css可以繪製不同方向的三角形
通過更改不同方向的邊框的大小，可以實現各種形狀的三角形(等邊，等腰，直角，不規則三角形)
三角形尖尖的方向那一邊的邊框設定可以省略：例如 朝下的三角形(下圖中第一個)，可以省略
border-bottom的設定，在反方向的邊框border-top可以設定三角形的顏色，其餘兩個邊框設定transparent即可。
2.通過兩個三角形，利用平移其中一個三角形可以達到繪製箭頭的效果
繪製三角形，然後前面的三角形控制箭頭的顏色，後面的三角形為白色，覆蓋第一個三角形，然後平移，形成箭頭形狀
具體效果如下：
具體程式碼如下：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #top { width:0px; height:0px; border-left:10px solid transparent; border-top:10px solid #000; border-right:10px solid transparent; } #bottom { width:0px; height:0px; border-left:10px solid transparent; border-bottom:10px solid #000; border-right:10px solid transparent; } #left { width:0px; height:0px; border-left:10px solid #000; border-top:10px solid transparent; border-bottom:10px solid transparent; } #right { width:0px; height:0px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #000; } #arrow{ width:100px; height:100px; position: relative; border:1px solid #ccc; } #arrow_left{ position: absolute; top:20px; left:30px; width:0px; height:0px; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid #000; } #arrow_right{ position: absolute; top:20px; left:40px; width:0px; height:0px; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid #fff; } </style> </head> <body> <div id="top"></div> <div id="bottom"></div> <div id="left"></div> <div id="right"></div> <div id="arrow"> <div id="arrow_left"></div> <div id="arrow_right"></div> </div> </body> </html>