border实现三角形的原理

前言：网上最广泛的实现三角形的方法，就是经过控制border来实现，那为何能够呢？

原理

咱们先来看看border的表现形式。

#box{
  width:100px;
  height:100px;
  background:yellow;
  border-top: 20px solid red;
  border-right:20px solid black;
  border-bottom:20px solid green;
  border-left:20px solid blue;
}
复制代码

观察上图能够发现，border表现为梯形。当减少box的宽高时，会发生以下变化：

从上图很容易看出，当box宽度下降到很小，也就是border的梯形的上边降到很小。因此想想，当这一值降到0时，border就变成了三角形。以下图：

因此咱们就能够经过将元素宽高设置为0，而经过控制border来获得想要的三角形了。

实现

将不须要方向的border设置为透明（transparent），就能够用来实现三角形了。好比想实现下三角形，就将border-left，border-bottom，border-right设置为transparent便可。

#box{
  width:0px;
  height:0px;
  border-top: 20px solid red;
  border-right:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:20px solid transparent;
}
复制代码

#box{
  width:0px;
  height:0px;
  border-top: 20px solid red;
  border-right:20px solid transparent;
  border-bottom:20px solid transparent;
  border-left:20px solid red;
}
复制代码

#box{
  width:0px;
  height:0px;
  border-top: 60px solid red;
  border-right:20px solid transparent;
  border-bottom:0px solid transparent;
  border-left:20px solid transparent;
}
复制代码

#box{
  width:100px;
  height:100px;
  border-top: 60px solid red;
  border-right:20px solid transparent;
  border-bottom:0px solid transparent;
  border-left:20px solid transparent;
}
复制代码

就不一一列举了，只要明白每一个方向的border都是一个三角形，就能经过调整border的大小和颜色/透明，得到各类三角形和梯形了。