使用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); 
}