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;
    }

注意事项:

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

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

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