使用border作三角形

網站上常常會使用一些三角形，除了圖片的方式，實際上利用border咱們能夠作出純CSS的三角形。咱們知道border是個邊抖能夠單獨設置，當四個邊相交的時候他們是何時改變的？

.t0{
  margin:30px;
  height:200px;
  width:200px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;
}

經過demo能夠看到border的相交的地方在45deg平分，當元素的width、和height屬性唄設置爲0的時候

.t1{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
  border-right:solid 100px orange;
  border-bottom:solid 100px blue;
}

這樣咱們就能夠看到三角形了，嘗試一下去掉兩個邊框，值保留上邊和左邊

.t2{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-left:solid 100px green;
}

這時候作三角形好像簡單了，只要咱們保留兩個相鄰邊，把另外的一個設置爲透明就能夠了

.t3{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 100px red;
  border-right:solid 100px rgba(0,0,0,0); 
}

這樣咱們就有一個直角三角形了，稍微修改一下

.t4{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 90px red;
  border-left:solid 200px rgba(0,0,0,0); 
}

這樣作等腰直角三角形也簡單了，保留相鄰的三個邊，兩個設置爲透明就好了

.t5{
  margin:30px;
  height:0px;
  width:0px;
  border-top:solid 200px red;
  border-left:solid 200px rgba(0,0,0,0); 
  border-right:solid 200px rgba(0,0,0,0); 
}

再稍微調整一下，還能夠作出各類形狀

.t6{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 100px green;
  border-top:solid 100px rgba(0,0,0,0); 
  border-bottom:solid 100px rgba(0,0,0,0); 
}

.t7{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 200px green;
  border-top:solid 80px rgba(0,0,0,0); 
  border-bottom:solid 80px rgba(0,0,0,0); 
}

.t8{
  margin:30px;
  height:0px;
  width:0px;
  border-left:solid 100px green;
  border-top:solid 200px rgba(0,0,0,0); 
  border-bottom:solid 100px rgba(0,0,0,0); 
}