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