css繪製三角形

標籤：style   http   color   os   ar   2014   div   代碼   

今天看到人家用css畫了一個三角形,簡簡單單幾行代碼,驚訝css其實還有很多我們不知道的東西.

三角形其實還是可以用在很多地方的.其實就那麼幾行代碼直接貼上:

div.arrow-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 50px solid #2f2f2f;    font-size: 0;}

原理還是挺簡單的:

黃色是左邊框,黑色是下邊框,綠色是右邊框,紅色是標籤的背景;

標籤的W和H依次100,50,10,0.

其實原理就是當邊框大於長寬的時候,他會形成一個梯形,而當標籤體積為0,且左右邊框透明,三角形就形成了.

so easy~!媽媽再也不用擔心我要用圖來代替三角形了....