如何仅利用css实现一个三角形（原理解析）

在前端开发的时候，我们有时候会需要用到一个三角形的形状，比如地址选择的时候，或者播放器里面播放按钮，快进快退按钮？

如下图所示：

我们通常情况下，会选择使用图片去做，或者使用svg去解决。我们今天换个法子，用css去实现。首先我们准备一个节点

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

.box{
  width: 200px;    
  height: 200px;
  border: 20px solid red;
}

我们就得到了一个四四方方的正方形

此时我们还没有看到什么不同，接下来我们把四个边框改成不同的颜色。

.box{
    width: 200px;
    height: 200px;
    border-right: 20px solid red;
    border-bottom: 20px solid blue;
    border-left: 20px solid black;
    border-top: 20px solid yellow;
}

我再来看效果图：

看到这里相信大家都明白了，看到这里，相信大家明白了。其实css实现三角的原理就是利用了边框是梯形的这一属性。而且基本上还是等腰梯形。接下来，我们把梯形的上边改为0，就得到了四个三角形

.box{
    width: 0;
    height: 0;
    border-right: 20px solid red;
    border-bottom: 20px solid blue;
    border-left: 20px solid black;
    border-top: 20px solid yellow;
}

由于我们只需要一个蓝色的三角形，我们就把其他三边的颜色设置成透明色

.box{
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-bottom: 20px solid blue;
    border-left: 20px solid transparent;
    border-top: 20px solid transparent;
}

就可以得到一个等腰三角形了。

然后你通过不同修改，

bottom-left,
border-top,
bottom-right,
border-bottom,

即可得到下图

欢迎巧用三角形，实现更多效果：

放水完毕！！！完毕！！！