[CSS]用css中的border画三角形

相信大家都知道border-color是控制边框颜色的，但是你可能没这样试过，来看下面的代码：

html：

<div class="div"></div>

css：

.div {
    width: 100px;
    height: 100px;
    border: 50px solid transparent;
    border-color: yellow green red aqua;
}

这样的结果为：

思考一：如果该div没有宽高会怎样？

实现结果：

思考二：前面的效果得到的是四个三角形，我们有没有什么办法将三角形从那个div中分离出来呢？

思路：目前没有接触过有关div分离的（具体也应该不存在吧），但是我们来扣一扣CSS的定义“层叠样式”，转换我们的思维，我们有没有什么方法将我们不想要的三角形覆盖掉？

具体做法：将我们需要的那边的颜色设置为我们的背景色–白色，对的这样就可以得到我们想要的效果。代码如下（以想要上边的三角形为例）：

border-color: yellow white white white;

是不是这样就算完成我们的三角形效果了呢？

我们可以试试修改整个body的背景颜色为黑色，看有什么变化：

发现该div仍占据着那么大的空间，并且背景颜色设置为白色并不是最科学

思考四：我们该如何将不想要的颜色设置为消失呢？

思路：我们将不想要表现出来的颜色设置为父级容器的背景色，border-color: yellow transparent transparent transparent;

结果如下：

思考三：我们如何将div设置不占那么大的空间呢？

思路：直接将想要的三角形的对边的border的宽度去掉

具体做法：（这次以想要下面的三角形为例），代码如下：

div{
width:0px;
height: 0px;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

结果如图：