border做三角符号

时间:2024-10-30 11:05:56

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

.test{width:; height:; 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:; height:; border:10px solid; border-color:#ff3300 #ffffff #ffffff #ffffff;}/*从等腰直角三角形到普通等腰三角*/
.test4{width:; height:; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffffff #ffffff;}
.test5{width:; height:; border-width:8px 8px; border-style:solid; border-color:#fff #fff #fff #ff3300;}

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