CSS画三角形及其原理

搜索网络之后发现三角形可以通过以下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)四部分，参照下图。

1、为了能更好的看清Border的四条边界的真实形状，我们为Border的四条边设置上不同的颜色。

border-left:red;
border-top:blue;
border-right:green;
border-bottom:yellow;

不难看出，当Border的四条边宽度相同时，每条边均为等腰梯形。

2、为四条边设置各不相同的宽度，其各边的形状改变为如下图所示。

border-left:20px red;
border-top:10px blue;
border-right:30px green;
border-bottom:40px yellow;

3、删除底部一条边后，其相邻边界的形状改变如下。

border-bottom:0px;

4、由此我们不难得出CSS画三角形所需的第一条结论：每条边(以黄色边为例)与其邻边所成夹角A，tanA=n/m（n,m分别为自己和邻边的宽度），当邻边宽度为0px时，A角大小为90°。

5、接下来我们将盒子模型中的内容(Content)和填充(Padding)都设置为0px，四条边的宽度相同时如下图所示。

6、四条边宽度不同时，各边形状如下图。

7、当border-top宽度为0px时，其它三边形状如下图。

8、再将上图中的左侧红色和右侧绿色三角形的颜色设置为透明(transparent)，其最终形状如下图。

由此我们可以得出CSS画三角形所需的第二条结论：当盒子模型中的内容(Content)+填充(Padding)的大小为0px时，Border边的形状将由梯形变为三角形。

9、有了以上两条结论，我们就可以通过控制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;
}

其画出的三角形效果如下：

10、其它三个朝向的三角形画法依此类推，四个朝向的三角形的完整代码如下：

<!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>

CSS画三角形及其原理相关推荐

5、css画三角形？原理是什么？
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子设置四周不同颜色的边框将盒子的宽高设置为0,仅保留边框得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
前端之使用CSS画三角形
在网页中如果需要一个三角形的图标,这时如果使用图片或字体图标可能会过于麻烦,这时候,利用CSS也可以轻松解决这个问题: 1.利用CSS画直角等腰三角形想要使用css画三角形,首先需要定义一个没有宽度 ...
如何使用HTML+CSS画三角形
今天又有小姐姐在群里问css是如何画出三角形的,让我想起一开始在学校学HTML+CSS的时候,觉得学这些标签样式很无趣,认为不过是一些文字+图片,直到偶然在慕课网上面看了一个视频=>重拾CSS的 ...
css画三角形的两种方法
css画三角形的两种方法画三角形 1 border 2 css的clip-path 画三角形 1 border <div class="left-down-small" / ...
css画三角形和箭头
css画三角形: 使用 CSS 绘制三角形的第一种方法就是使用「border」属性. 给定一个宽度和高度都为 0 的元素,其 border 的任何值都会直接相交,我们可以利用这个交点来创建三角形. ...
HTML之CSS画三角形原理,使用css画三角形的方法代码
用纯css画个三角形以下是源代码: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/ ...

CSS画三角形及其原理

CSS画三角形及其原理相关推荐

最新文章

热门文章