css实现各种三角形（美人尖）

css实现各种三角形（美人尖）

1.倒三角形的实现（保留上边框）：

div{
    width:0px;
    height:0px;
    border-width:10px;
    border-style:solid;
    border-color:red transparent transparent transparent;
}

效果：

2.正三角形的实现（保留下边框）

div{
    width:0px;
    height:0px;
    border-width:10px;
    border-style:solid;
    border-color:transparent transparent red transparent;
}

效果：

3.向右三角的实现（保留左边框）：

        div{
            width:0px;
            height:0px;
            border-width:10px;
            border-style:solid;
            border-color:transparent transparent  transparent red;
        }

效果：

4.向左三角的实现（保留右面的边）：

 div{
            width:0px;
            height:0px;
            border-width:10px;
            border-style:solid;
            border-color:transparent red transparent  transparent ;
        }

效果：

4.保留上边和右边组成三角形：

 div{
            width:0px;
            height:0px;
            border-width:10px;
            border-style:solid;
            border-color:red red transparent  transparent ;
        }

效果：

原理：

1.首先设置一个盒子的三边为不同的颜色，看下边框是怎么显示的。

div{
    width:20px;
    height:20px;
    border-width:15px;
    border-style:solid;
    border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

显示效果如图所示：

可以看出每个边都是一个梯形。

2.设置盒子的宽和高为0：

div{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

效果：

当盒子的宽和高都是0时，边框显示为三角形。由此可以看出，如何实现各种三角形。如果想实现倒三角，则其他的边为transparent，只设置最上面的边有颜色，则可以实现倒三角，同理可以实现各种三角形。