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的大小和顏色/透明，得到各類三角形和梯形了。