CSS实现三角形

CSS实现三角形的思想：

1. div的宽高为0
2. div的边框三边透明，一边有颜色

接下来我会将原理一步一步实现，这样更易于理解。

首先创建一个div，给每条边框设置不同的颜色

#box {
    width: 100px;
    height: 100px;
    border: 50px solid;
    border-color: darkblue red salmon deeppink;
}

<div id = "box"></div>

 

 

我们可以看到上图结果，中间的空白是div，那么如果把div的宽高设为0呢 

 

 

 

 

 width: 0;

height: 0;

把div的宽高设为0后如上图，所以只要让border的其他三个边框透明就行 

 

#box {
    width: 0;
    height: 0;
    border: 70px solid;
    border-color: darkblue transparent transparent transparent;
}

<div id="box"></div>

      实现的三角形如图