您的位置:知蚁博客 » 程序设计 » 用css绘制三角形 附原理说明

用css绘制三角形 附原理说明

作者: 发布时间:2012-11-29 分类:程序设计 标签: 1,144人浏览
友情提示:本文有多页内容!

用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

相关文章

我来说说

(必须)

(必须,保密)

你确定你已经看过文章了?
取消

无觅相关文章插件,快速提升流量