为什么利用border可以实现三角形

标签：border   padding   调整   height   9.png   margin   这一   title   order   

前言：网上最普遍的实现三角形的方法，就是通过控制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来得到想要的三角形了。

实现

#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的大小和颜色/透明，活动各种三角形和梯形了。

为什么利用border可以实现三角形

标签：border   padding   调整   height   9.png   margin   这一   title   order   

原文地址：http://www.cnblogs.com/youhong/p/6530575.html