前端面试常见问题：如何使用纯CSS画三角形（超详细步骤分解）

　　在前端面试中，经常会有面试官会问到如何使用css绘制出三角形的形状？使用css画三角形的原理,是利用元素的边框去绘制,主要通过设置border属性去改变边框的宽度和颜色、透明度来达到三角形的视觉效果

　　下面分解为几个步骤演示如何让一个普通的div盒子一步一步变成三角形。

　　html代码:

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

　　为了方便这一步的观看,先来给div设置个宽高和背景颜色css代码:

.item {
    width: 100px;
    height: 100px;
    background-color: thistle;
}

　　效果是这样的,这也是最开始的盒子:

　　现在去掉盒子多余的背景颜色属性,然后我们来给这个盒子加一个一定宽度的边框,并且每个边框都设置不同的颜色,css代码:

.item {
    width: 100px;
    height: 100px;
    border-right: 50px solid yellow;
    border-top: 50px solid blue;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
}

　　为了让效果更明显,边框宽度设置的比较大,效果是这样的:

　　中间的div没有变，可以看到,四个边框都是同样的宽度，为了平均分配,就像上图那样分布，这样四个边框看上去就是四个梯形，上下两个梯形的上边长度=div的宽度，左右两个梯形的上边长度=div的高度

　　此时如果把div宽高都设置为0会发生什么变化呢?

　　css代码：

.item {
    width: 0;
    height: 0;
    background-color: thistle;
    border-top: 50px solid blue;
    border-right: 50px solid yellow;
    border-bottom: 50px solid red;
    border-left: 50px solid green;
}

　　效果如下:

　　因为div宽高都为0了,那么梯形的上边长度也跟着变为0,自然就成了三角形，这样一来我们一下就得到了4个三角形，如果我想要下面的红色三角形，那么给其他三个边框加上css中的transparent属性就行了

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

　　效果如下:

　　这样就得到了一个用css绘制的三角形，接下来就很简单了，想要哪边的三角形，就将另外三个边框用transparent属性设置为颜色全透明就行了。

　　拓展：

　　transparent属性：它代表着全透明黑色，即一个类似rgba(0,0,0,0)这样的值

　　transparent一般使用场景：

　　如果一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent