border做三角符号

用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个方向的颜色，来展示不同的样式