首页 > 代码库 > CSS绘制三角形的原理剖析

CSS绘制三角形的原理剖析

2024-11-27 23:54:38   204人阅读

今天学习Bootstrap时候，看到按钮的向下三角形源码：

 1 .caret {  
 2   display: inline-block;  
 3   width: 0;  
 4   height: 0;  
 5   margin-left: 2px;  
 6   vertical-align: middle;  
 7   border-top: 4px solid;  
 8   border-right: 4px solid transparent;  
 9   border-left: 4px solid transparent;  
10 }

我对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，看看是怎么样的图形。

 

1 .border {  
2   width: 0;   
3   height:0;  
4   border-top: 40px solid #ADFF2F;  
5   border-right: 40px solid #BA55D3;  
6   border-left: 40px solid #FF0000;  
7 }

技术分享

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

 

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

 

1 .border {  
2   width: 0;   
3   height:0;  
4   border-top: 40px solid #ADFF2F;  
5   border-right: 40px solid #BA55D3;  
6 }

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

技术分享

 

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

 

1 .border {  
2   width: 40px;   
3   height:40px;  
4   border-top: 40px solid #ADFF2F;  
5   border-right: 40px solid #BA55D3;  
6 }

技术分享

 

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

 

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

 

1 .border {  
2   width: 0;   
3   height:0;  
4   border-top: 40px solid #ADFF2F;  
5   border-bottom: 40px solid #FF0000;  
6 }

 

浏览器什么也不显示，分析其原因：因为元素的高和宽都为0，而且对边的两条边框没有交集，所以必然收缩为0.

最后我们来看一个应用的例子：

 

 1 <span style="white-space:pre">        </span>#demo {  
 2             width: 200px;  
 3             line-height: 100px;  
 4             background-color: #fff;  
 5             position: relative;  
 6             border: 1px solid #5BBF5A;  
 7             text-align: center;  
 8             font-size: 25px;  
 9         }  
10   
11         #demo:after, #demo:before {  
12             border: solid transparent;  
13             content: ‘ ‘;  
14             width: 0;  
15             height:  0;  
16             position: absolute;  
17         }  
18   
19         #demo:after {  
20             border-width: 10px;  
21             border-top-color: #fff;  
22             top: 100px;  
23             left: 150px;  
24         }  
25   
26         #demo:before {  
27             border-width: 11px;  
28             border-top-color: #5BBF5A;  
29             top: 100px;  
30             left: 149px;  
31         }  
32

 

 

效果如下：
技术分享

它实现的原理很简单，就是两个三角形的叠加。

CSS绘制三角形的原理剖析


联系
我们