CSS画三角形

一直以来每次用到画三角形的时候总需要去百度一下才能写得出来，今天再次把css画三角形的原理学习了一遍，相信以后再也不用查资料才能画得出来了，下面跟着我来看看吧~

第一步

第一步我们先来一个div，给这个div设置宽高及border，便于大家观察，给上下左右边框都设置成不同的颜色。

HTML部分

<div  class='box'></div>

CSS部分

.box{
      width:30px;
      height:30px;
      border-top:100px  solid  red;
      border-left: 100px solid slateblue;
      brder-right: 100px solid yellow;
      border-bottom: 100px solid forestgreen;
}

以下是第一步展现出来的效果

内容高宽为30px的效果图

在这一步是不是可以看得出来，当我们的内容区域足够小的时候，四边的边框会重合，所以下一步我们把div的高宽都设置为0，再来看下效果。

第二步更改div的高宽

CSS部分

.box{
      margin: 100px auto;
      width: 0px;
      height: 0px;
      border-top: 100px solid red;
      border-left: 100px solid slateblue;
      border-right: 100px solid yellow;
      border-bottom: 100px solid forestgreen;
}

内容宽高都为0的效果

我们可以看到div的宽高都为0了以后，4边的border也重合了在一起，可以从图中看得出来出现了四个三角形，我们想要哪个角就把其余三个角的背景颜色设置成透明色就好了。

第三步设置三个边框的颜色为透明色

CSS部分

.box{
        margin: 100px auto;
        width: 0px;
        height: 0px;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid transparent;
}

朝下的三角形效果

其他方向上的三角形一样的原理，根据自身的需求去更改各个方向的边框颜色，以上就是css画三角形的步骤及原理，希望大家跟我一样搞懂原理的东西，这样就不会死记硬背写代码了