<實(shí)際需求中腺办,很多時(shí)候都會(huì)有箭頭的情況,只不過(guò)一開(kāi)始總是喜歡找別人寫(xiě)好的糟描,隨著需求的增加怀喉,很難通過(guò)修改來(lái)滿足需求,所以理解原理自己動(dòng)手才是萬(wàn)難的根本解決辦法船响。
一躬拢、繪制三角
容器:
<div class='jt'></div>
樣式:
.jt{
width:0;
height:0;
border:50px solid;
border-color: red yellow green blue;}*
效果如圖:
利用border繪制了四個(gè)三角組成的矩形,現(xiàn)在要繪制三角形见间,只需要讓其他任意三個(gè)三角形變?yōu)橥该骷纯伞?/p>
修改代碼:
border-color: red transparent transparent transparent;
二聊闯、繪制箭頭
利用三角繪制箭頭,只需要再繪制一個(gè)和此三角大小相同米诉,方向相同的三角菱蔬,顏色和背景顏色一樣,覆蓋在此三角上面,通過(guò)少量的位移形成箭頭拴泌。