5、css画三角形?原理是什么?
简介
css画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四部:
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子的宽高设置为0,仅保留边框
- 得到四个三角形,选择其中一个后,其他三角形(边框)设置颜色为透明
div {width: 0px;height: 0px;border-top: 20px solid transparent;border-bottom: 20px solid red;border-left: 20px solid transparent;border-right: 20px solid transparent;
}
一、前言
在前端开发中,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮
通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢?
实现过程似乎也并不困难,通过边框就可完成
二、实现过程
在以前也讲过盒子模型,默认情况下是一个矩形,实现也很简单
<style>.border {width: 50px;height: 50px;border: 2px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;}
</style>
<div class="border"></div>
效果如如下图所示:
将border设置50px,效果图如下所示:
白色区域则为width、height,这时候值需要你将白色区域部分宽高逐渐变小,最终变为0,则变成如下图所示:
这时候就已经能够看到4个不同颜色的三角形,如果需要下方三角形,只需要将上、左、右边框设置为0就可以得到下方的三角形,但这种方式,虽然视觉上实现了三角形,实际上,隐藏的部分仍然占据了部分高度,需要将上方的宽度去掉。
最终的代码实现如下:
.border {width: 0;height: 0;border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #d9534f;
}
如果想要实现一个只有边框是空心的三角形,由于这里不能再使用border属性,所以最直接的方法就是利用伪类新建一个小一点的三角形定位上去
.border {width: 0;height: 0;border-style: solid;border-width: 0 50px 50px;border-color: transparent transparent #d9534f;position: relative;
}
.border:after {content: '';border-style: solid;border-width: 0 40px 40px;border-color: transparent transparent #96ceb4;position: absolute;top: 0;left: 0;
}
效果图如下所示:
伪类元素定位参照对象的内容区域宽高都为0,则内容区域即可以理解成中心一点,所以伪元素相对中心这点定位。
将元素定位进行微调以及改变颜色,就能够完成下方效果图
最终代码如下:
.border:after {content: '';border-style: solid;border-width: 0 40px 40px;border-color: transparent transparent #96ceb4;position: absolute;top: 6px;left: -40px;
}
三、原理分析
可以看到,边框实现三角形的部分,边框实际上并不是一个直线,如果我们将4条边设置不同的颜色,将边框逐渐方法,可以得到每条边框都是一个梯形。
当我们取消边框的时候,发现下面几种情况:
- 取消一条边的时候,与这条边相邻的两条边的接触部分会变成直的
- 当仅有邻边时,两个便会变成对分的三角
- 当保留边没有其他接触时,极限情况所有东西都会消失
通过上图的变化规则,利用旋转、隐藏,以及设置内容宽高等属性,就能够实现其他类似的三角形。
如设置执教三角形,如上图倒数第三行的实现过程,我们就能知道整个实现原理。
实现代码如下:
.box {/* 内部大小 */width: 0px;height: 0px;/* 边框大小 只设置两条边*/border-top: #4285f4 solid;border-right: transparent solid;border-width: 85px;/* 其他设置 */margin: 50px;
}
5、css画三角形?原理是什么?相关推荐
- HTML之CSS画三角形原理
在进行WEB应用开发的过程中,我们经常会需要使用到三角形图标,例如下面这个下拉选择控件右侧的收缩箭头. 又或者像下面这种情形. 搜索网络之后发现三角形可以通过以下CSS代码实现: #triangle_ ...
- 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 ...
- css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析 用CSS画三角形,实际上就 ...
- 【前端:css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...
- 前端之使用CSS画三角形
在网页中如果需要一个三角形的图标,这时如果使用图片或字体图标可能会过于麻烦,这时候,利用CSS也可以轻松解决这个问题: 1.利用CSS画直角等腰三角形 想要使用css画三角形,首先需要定义一个没有宽度 ...
- html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析 因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
- CSS实现三角形原理及过程
CSS实现三角形原理及过程 在开发中,遇到很多的列表都需要用到三角形的箭头,可以直接用一个图片作背景铺垫,但这样占用一定的内存,对于这种简单的图形纯CSS也能实现,它占用的内存相对图片较小,所以相比而 ...
最新文章
- wpf单容器中的Chrome
- 【NOIP】提高组2015 神奇的幻方
- eclipse 无法解析导入 javax.servlet 的解决方法
- P3166-[CQOI2014]数三角形【GCD】
- String 使用不当可能导致内存泄露
- 选中下拉列表显示全部数据_小白都能学会的多级下拉列表,让你的Excel效率提升百倍...
- flask get 参数_用它 5 分钟以后,我放弃用了四年的 Flask
- 【004】vim 和 他的辅助工具们
- 块级,行内(内联)对比笔记
- 对java的集合的理解_谈谈你对java集合类的理解
- 日本研发投篮机器人,隔着半个球场都能百发百中,虐翻人类职业球员
- Ubuntu20.04环境下 安装Tensorflow
- sencha touch 2中list控件分组排序
- www.sohu.com/a/162498139_165716
- LeetCode_16.22兰顿蚂蚁
- 什么软件可以在给多个视频添加马赛克同时批量裁剪画面呢?
- [光劍藏書館2020] 孔夫子旧书网
- 阿里云服务器安全组开放指定端口无法访问问题记录
- 实现Vibrator测试功能,短震动,长震动,频率震动,取消震动
- 学习jQuery框架获取数据的几种基础方式