用border实现三角形的过程

div{

  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即可。

div{

  width:0px;

  height:0px;

  border-top: 20px solid red;

  border-right:20px solid transparent;

  border-bottom:20px solid transparent;

  border-left:20px solid transparent;

}

此时只有border-top显示且为红色，其他都为透明，所以为红色三角形

div{

  width:100px;

  height:100px;

  border-top: 60px solid red;

  border-right:20px solid transparent;

  border-bottom:0px solid transparent;

  border-left:20px solid transparent;

}

此时div元素有一定的宽高，但是无内容，占去了原属于是三角形的一部分，所以显现的是一个梯形。

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

巴特西

用border实现三角形的过程

实现

最新文章

热门文章