HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头。又或者像下面这种情形。搜索网络之后发现三角形可以通过以下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)四部分,参照下图。为了能更好的看清Border的四条边界的真实形状,我们为Border的四条边设置上不同的颜色。border-left:red; border-top:blue; border-right:green; border-bottom:yellow;
不难看出,当Border的四条边宽度相同时,每条边均为等腰梯形。为四条边设置各不相同的宽度,其各边的形状改变为如下图所示。border-left:20px red; border-top:10px blue; border-right:30px green; border-bottom:40px yellow;
删除底部一条边后,其相邻边界的形状改变如下。border-bottom:0px;
由此我们不难得出CSS画三角形所需的第一条结论:每条边(以黄色边为例)与其邻边所成夹角A,tanA=n/m(n,m分别为自己和邻边的宽度),当邻边宽度为0px时,A角大小为90°。接下来我们将盒子模型中的内容(Content)和填充(Padding)都设置为0px,四条边的宽度相同时如下图所示。四条边宽度不同时,各边形状如下图。当border-top宽度为0px时,其它三边形状如下图。再将上图中的左侧红色和右侧绿色三角形的颜色设置为透明(transparent),其最终形状如下图。由此我们可以得出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; }
其画出的三角形效果如下:其它三个朝向的三角形画法依此类推,四个朝向的三角形的完整代码如下:<!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>
效果如下:
HTML之CSS画三角形原理相关推荐
- HTML之CSS画三角形原理,使用css画三角形的方法代码
用纯css画个三角形以下是源代码: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/ ...
- HTML之CSS画三角形原理,纯CSS写三角形样式集合(原理解析)
一.实现原理 在css3中,我们主要使用的是一个transparent的属性,意思是透明的,比如我们将字体设置为黑色会写color:black,那么如果想把字体的颜色设置为透明,我们可以写color: ...
- CSS画三角形及其原理
搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_bottom{ height:0px; width:0px; border-left:20px solid transparen ...
- 5、css画三角形?原理是什么?
简介 css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部: 设置一个盒子 设置四周不同颜色的边框 将盒子的宽高设置为0,仅保留边框 得到四个三角形,选择其中一个后,其他三角形(边框)设 ...
- css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析 用CSS画三角形,实际上就 ...
- 【前端:css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
- 前端之使用CSS画三角形
在网页中如果需要一个三角形的图标,这时如果使用图片或字体图标可能会过于麻烦,这时候,利用CSS也可以轻松解决这个问题: 1.利用CSS画直角等腰三角形 想要使用css画三角形,首先需要定义一个没有宽度 ...
- html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析 因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
- CSS实现三角形原理及过程
CSS实现三角形原理及过程 在开发中,遇到很多的列表都需要用到三角形的箭头,可以直接用一个图片作背景铺垫,但这样占用一定的内存,对于这种简单的图形纯CSS也能实现,它占用的内存相对图片较小,所以相比而 ...
最新文章
- 【渣硕的数学笔记】数值分析
- mysqli num php_php mysqli_num_rows函数怎么用
- JAVA笔记14__多线程共享数据(同步)/ 线程死锁 / 生产者与消费者应用案例 / 线程池...
- 天猫双11凭什么达到1682亿?这些支撑技术或许可以告诉你
- Linux软件安装解决方案
- 串口服务器的通讯模式
- 亲密关系沟通-【唤起亲密】-在平淡关系中创造高质量沟通
- RHEL5.0 搭建DNS服务器
- 低代码平台-竞品分析ABP框架
- 最优秀的微信小程序UI组件库
- 华为OD机考分享精华帖
- 【NOIP模拟】夕阳
- 在SDLC中使用静态代码分析的最佳实践
- learnopengl——Specular IBL——貌似读懂了
- 阿里二面:RocketMQ 消费失败了,怎么处理?
- 【论文笔记】CVPR2019_SiamMask
- 【DP学习总结】区间DP
- python入门之python编程语言(简介)
- vue-router 路由传参
- Android UI 设计工具