CSS绘制三角形的原理剖析

当前位置 : 首页 > 网页制作 > CSS > CSS绘制三角形的原理剖析

CSS绘制三角形的原理剖析

来源: 作者: 时间:2016-01-20 09:22
今天学习Bootstrap时候,看到按钮的向下三角形源码: caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px so

今天学习Bootstrap时候,看到按钮的向下三角形:

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

我对border应用的原理不解,所以准备探索一下。我一直以边框是矩形的,如下代码

.border {
  width:50px;
  height:50px;
  border: 2px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;

}

\


当我们增大border的值时

.border {
  width:50px;
  height:50px;
  border: 20px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
\

从上图可以很明显的发现每一边的边框是梯形。


现在试想一下,我们把元素的长和宽都设置为0px,边框的值不变,我们用极限的原理解释,每一边的边框将会由梯形变成三角形,下面我们用代码来试验一下。

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}
果然不出所料,我们得到如下结果:

\


那么现在我们对如何绘制三角形就有一个思路:把其他三边的边框的border-color值设为transparent,即可得到一个三角形。比如

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: #ADFF2F transparent transparent transparent;
}

\


我们再回过头来看Bootstrap中.caret的源码。似乎和我们想象中的不一样,在设计向下三角形时,开发者只设置了左上右的边框值,然后将左右两边的边框的border-color设置为transparent。我们现在先把左右两边的border-color不设置为transparent,看看是怎么样的图形。

.border {
  width: 0; 
  height:0;
  border-top: 40px solid #ADFF2F;
  border-right: 40px solid #BA55D3;
  border-left: 40px solid #FF0000;
}

\

原来当不设置下边框时,左右的边框会把下半部分切掉。到这里我们应该能完全理解bootstrap的.caret代码的原理了。


但是我们的探索并没有到此就结束,我们带着好奇心,测试如下代码:

.border {
  width: 0; 
  height:0;
  border-top: 40px solid #ADFF2F;
  border-right: 40px solid #BA55D3;
}

我们只设置上右的边框,得到如下结果:

\


似乎有点难以理解,如果我们测试如下代码,应该会恍然大悟。

.border {
  width: 40px; 
  height:40px;
  border-top: 40px solid #ADFF2F;
  border-right: 40px solid #BA55D3;
}
\

原来上面那一个例子显示成一个正方形,是因为元素的高和宽都为0,从而导致border收缩为右上角那一部分。


最有我们来看看,如果只设置元素对边的两条边框,看看会出现什么情况。

.border {
  width: 0; 
  height:0;
  border-top: 40px solid #ADFF2F;
  border-bottom: 40px solid #FF0000;
}
什么也不显示,分析其原因:因为元素的高和宽都为0,而且对边的两条边框没有交集,所以必然收缩为0.







Tag:
网友评论

<