友情提示:本文有多页内容!
用css绘制三角形,非常的简单,设置下border和宽高属性就可以了,具体请看代码:
.triangle { border-color: red transparent transparent transparent;/*边框颜色:顺序为:上、右、下、左*/ border-style: solid; border-width: 20px; height:0; width:0; }
<div class="triangle"></div>
上面代码将显示一个尖头朝下的红色三角形
.triangle { border-color: red green blue pink;/*边框颜色:顺序为:上、右、下、左*/ border-style: solid; border-width: 20px; height:0; width:0; }
修改下css样式,这时候会显示所有的4个三角形,并按照不同的颜色显示,保留下需要的,然后将其余的颜色改变为transparent(透明的意思)即可。
很好用吧,抓紧去试试吧~
原创文章请注明转载于知蚁博客,本文地址:http://www.letuknowit.com/archives/use-css-achieve-triangle-effert
1 2