HTML之CSS画三角形原理

阳光穿透心脏的1/2处 2023-03-06 08:24 16阅读 0赞

> 在进行WEB应用开发的过程中，我们经常会需要使用到三角形图标，例如下面这个下拉选择控件右侧的收缩箭头。
> 
> ![Center][]  
> 
> 
> ![Image 1][]
> 
> 又或者像下面这种情形。
> 
> ![Center 1][]  
> 
> 
> ![Image 1][]
> 
> 搜索网络之后发现三角形![Center 2][]可以通过以下CSS代码实现：
> 
>     #triangle_bottom{
>     height:0px;
>     width:0px;
>     border-left:20px solid transparent;
>     border-right:20px solid transparent ;
>     border-bottom:20px solid #9E9E9E ;
>     }
> 
> 那么，其内部到底是如何实现的呢？接下来是我学习CSS画三角形原理的一点小总结。
> 
> 其实使用CSS代码绘制三角形，只是对盒子模型中的"border"属性的简单应用。盒子模型将HTML元素划分为内容(Content)、填充(Padding)、边框(Border)和边界(Margin)四部分，参照下图。
> 
> ![Center 3][]  
> 
> 
> ![Image 1][]
> 
> 为了能更好的看清Border的四条边界的真实形状，我们为Border的四条边设置上不同的颜色。
> 
>     border-left:red;
>     border-top:blue;
>     border-right:green;
>     border-bottom:yellow;
> 
> ![Image 1][]
> 
> ![Center 4][]  
> 
> 
> 不难看出，当Border的四条边宽度相同时，每条边均为等腰梯形。
> 
> 为四条边设置各不相同的宽度，其各边的形状改变为如下图所示。
> 
>     border-left:20px red;
>     border-top:10px blue;
>     border-right:30px green;
>     border-bottom:40px yellow;
> 
> ![Center 5][]  
> 
> 
> ![Image 1][]
> 
> 删除底部一条边后，其相邻边界的形状改变如下。
> 
>     border-bottom:0px;
> 
> ![Center 6][]  
> 
> 
> ![Image 1][]
> 
> 由此我们不难得出CSS画三角形所需的第一条结论：**每条边(以黄色边为例)与其邻边所成夹角A，tanA=n/m（n,m分别为自己和邻边的宽度），当邻边宽度为0px时，A角大小为90°。**
> 
> ![Center 7][]  
> 
> 
> ![Image 1][]
> 
> 接下来我们将盒子模型中的内容(Content)和填充(Padding)都设置为0px，四条边的宽度相同时如下图所示。
> 
> ![Center 8][]  
> 
> 
> ![Image 1][]
> 
> 四条边宽度不同时，各边形状如下图。
> 
> ![Center 9][]  
> 
> 
> ![Image 1][]
> 
> 当border-top宽度为0px时，其它三边形状如下图。
> 
> ![Center 10][]  
> 
> 
> ![Image 1][]
> 
> 再将上图中的左侧红色和右侧绿色三角形的颜色设置为透明(transparent)，其最终形状如下图。
> 
> ![Center 11][]  
> 
> 
> 由此我们可以得出CSS画三角形所需的第二条结论： **当盒子模型中的内容(Content)+填充(Padding)的大小为0px时，Border边的形状将由梯形变为三角形。**
> 
>   
> 
> 
> 有了以上两条结论，我们就可以通过控制Border各条边的宽度和设置透明色来轻松画出各种角度的三角形了。以画向上的底角45°的等腰三角形为例，由于tan(45°)=1，我们需将border-bottom、border-left、border-right三者设置为相等的宽度，并将border-left和border-right设置为透明色，代码如下：
> 
>     #triangle_bottom{
>     height:0px;
>     width:0px;
>     border-left:20px solid transparent;
>     border-right:20px solid transparent ;
>     border-bottom:20px solid #FF9800;
>     }
> 
> 其画出的三角形效果如下：
> 
> ![Image 1][]
> 
> ![Center 12][]  
> 
> 
> 其它三个朝向的三角形画法依此类推，四个朝向的三角形的完整代码如下：
> 
>     <!DOCTYPE HTML>
>     <HTML>
>     <head>
>     <style type="text/css">
>     .triangle_left{
>         width: 0;
>         height: 0;
>         border-left: 50px solid red;
>         border-top: 50px solid transparent;
>         border-bottom: 50px solid transparent;
>     
>     }
>     .triangle_top{
>         width: 0;
>         height: 0;
>         border-top: 50px solid blue;
>         border-right: 50px solid transparent;
>         border-left: 50px solid transparent;
>     }
>     .triangle_right{
>         width: 0;
>         height: 0;
>         border-right: 50px solid green;
>         border-top: 50px solid transparent;
>         border-bottom: 50px solid transparent;
>     }
>     .triangle_bottom{
>         width: 0;
>         height: 0;
>         border-bottom: 50px solid yellow;
>         border-right: 50px solid transparent;
>         border-left: 50px solid transparent;
>     }
>     </style>
>     </head>
>     <body>
>     <div class="triangle_left"></div>
>     <div class="triangle_top"></div>
>     <div class="triangle_right"></div>
>     <div class="triangle_bottom"></div>
>     </body>
>     </HTML>
> 
> 效果如下：
> 
> ![Center 13][]  
> 
> 
> ![Image 1][]

[Center]: /images/20230208/fa5711e244a343a2adb46e5332b0ee63.png
[Image 1]: 
[Center 1]: /images/20230208/4246ea4e0877495182bdc62d6c6d2280.png
[Center 2]: /images/20230208/d4b360f3f4a648ab9199d3a81a599dbc.png
[Center 3]: /images/20230208/c09b36826a364d6684844ff8a638da88.png
[Center 4]: /images/20230208/e98970d59d5246178b540d193cf6bcad.png
[Center 5]: /images/20230208/b125ac04760c49b093d4e7a124d6bad3.png
[Center 6]: /images/20230208/f0159977ae8b42f6abcfc8818521bfee.png
[Center 7]: /images/20230208/ea3f8a8df32f437e88f7002c06a2974f.png
[Center 8]: /images/20230208/9f5fbb7f55df4d8cb42ea597eb7bf548.png
[Center 9]: /images/20230208/7c9152afa8a44b939ffd2e0ce55ccaca.png
[Center 10]: /images/20230208/98405c44bd5449a49d61139d301c11bd.png
[Center 11]: /images/20230208/d5ca000adbc1447c94d906196b0b36f7.png
[Center 12]: /images/20230208/eeee979ea3db43e2a22703b44d7e8367.png
[Center 13]: /images/20230208/dde4bf49f8534bf59d1149e1ff99d1f1.png