用border做三角符号以及其他图形

.test{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
.test1{width:10px; height:10px; border:10px solid; border-color:#ff3300 #0000ff #339966 #00ff00;}/*梯形图案*/
.test2{width:10px; height:10px; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}/*从梯形到三角*/
.test3{width:0; height:0; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}/*从等腰直角三角形到普通等腰三角*/
.test4{width:0; height:0; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
.test5{width:0; height:0; border-width:8px 8px; border-style:solid; border-color:#fff #fff #fff #ff3300;}

 

设置高宽为0,设置边框的高度宽度,通过设置边框的上右下左4个方向的颜色,来展示不同的样式

 
 
 
 
 
 
posted on 2016-03-03 15:34  浅唱年华1920  阅读(146)  评论(0编辑  收藏  举报