Fork me on GitHub

用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的宽高时,会发生如下变化:

image

从上图很容易看出,当box宽度降低到很小,也就是border的梯形的上边降到很小。所以想一想,当这一值降到0时,border就变成了三角形。如下图:

image

所以我们就可以通过将元素宽高设置为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的大小和颜色/透明,获得各种三角形和梯形了。

 
posted @ 2019-02-28 22:00  溪风!  阅读(631)  评论(0编辑  收藏  举报