CSS绘制好看的三角形

CSS绘制好看的三角形

div{ /*CSS边框可以模拟三角形效果*/ width:0; height:0; border-top:10px solid red; border-right:10px solid green; border-bottom:10px solid pink; border-left:10px solid blue; }

注意事项:

高度和宽度均设置为0;四个边框都要写，若只想留下相应三角形，只留下需要的颜色，其他的设置为transparent。为照顾兼容性，加上font-size:0;line-height:0;

例如如果想得到角向下的三角

div { /*CSS边框可以模拟三角形效果*/ width: 0; height: 0; border-style: solid; border-width: 10px; border-color: red transparent transparent transparent; /* 分别对应上、右、下、左的三角形*/ }