CSS繪制三角形和箭頭不用再用圖片了

1、css繪制三角形和箭頭，不用再用圖片了前言還在用制作箭頭，三角形，那就太lou了。css可以輕松搞定這一切，而且色彩大小想怎么變就怎么變，還不用不安失真等問題。先來看看這段代碼:/*css*/.d1 width: 0; height: 0; border: 100px solid 339933;/*html*/*css*/.d2 width: 0; height: 0; border-width: 100px; border-style: solid; border-color:ffcccc 0099cc 996699 339933;/*html*/css繪制三角形和箭頭，不用再用了看了這兩段

2、代碼，和效果圖，是不是有一點眉目了？本來畫三角形，只需要用元素的border來控制就可以了，border-with控制大小， border-style控制樣式（實線、虛線等）， border-color控制色彩，分上、右、下、左三角形示例向下三角形/*css*/.d3 margin-left: 10px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color:ffcccc transparent transparent transparent;/*html*/css繪制三

3、角形和箭頭，不用再用了向左三角形/*css*/.d4 margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent 0099cc transparent transparent;/*html*/css繪制三角形和箭頭，不用再用了這里的transparent是透亮的意思接下來兩種就留給聰慧的你了，信任你可以的，動手才知道本來這么容易！其實我們還可以通過，一種樣式，來實現(xiàn)不能角度的三角形，那就是利用css3里面的旋轉(zhuǎn)t

4、ransform:rotate(90deg)。/*css*/.d4 margin-left: 110px; float: left; width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent 0099cc transparent transparent; transform: rotate(90deg); /*順時針旋轉(zhuǎn)90°*/*html*/css繪制三角形和箭頭，不用再用了箭頭示例向左箭頭/*css*/.left position: absolute;.l

5、eft:before,.left:after position: absolute; content: '' border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-bottom: 10px transparent dashed; border-right: 10px fff solid;.left:before border-right: 10px 0099cc solid;.left:after left: 1px; /*籠罩并錯開1px*/ border-right

6、: 10px fff solid;/*html*/css繪制三角形和箭頭，不用再用了是不是發(fā)覺箭頭和三角形是一樣的呢？發(fā)覺了，解釋你已經(jīng)懂了，箭頭其實就是2個三角形，然后用白色三角形籠罩藍色三角形，并且錯開1px，剛剛好就形成了箭頭。這就和最強大腦層疊消融項目是一樣的。向上箭頭/*css*/.top position: absolute;.top:before,.top:after position: absolute; content: '' border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-right: 10px transparent dashed; border-bottom: 10px fff solid;.top:before border-bottom: 10px 0099cc solid;.top:after top: 1px; /*籠罩并錯開1px*/ border-bottom: 10px fff solid;/*html*/css繪制三角形和箭頭，不用再