面试官:CSS如何画一个三角形?原理是什么?
一、前言
在前端开发的时候,我们有时候会需要用到一个三角形的形状,比如地址选择或者播放器里面播放按钮
通常情况下,我们会使用图片或者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个不同颜色的三角形,如果需要下方三角形,只需要将上、左、右边框设置为透明就可以得到下方的红色三角形
但这种方式,虽然视觉上是实现了三角形,但实际上,隐藏的部分任然占据部分高度,需要将上方的宽度去掉
最终实现代码如下:
.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;
}
三、原理分析
可以看到,边框是实现三角形的部分,边框实际上并不是一个直线,如果我们将四条边设置不同的颜色,将边框逐渐放大,可以得到每条边框都是一个梯形
当分别取消边框的时候,发现下面几种情况:
取消一条边的时候,与这条边相邻的两条边的接触部分会变成直的
当仅有邻边时, 两个边会变成对分的三角
当保留边没有其他接触时,极限情况所有东西都会消失
通过上图的变化规则,利用旋转、隐藏,以及设置内容宽高等属性,就能够实现其他类型的三角形
如设置直角三角形,如上图倒数第三行实现过程,我们就能知道整个实现原理
实现代码如下:
.box {/* 内部大小 */width: 0px;height: 0px;/* 边框大小 只设置两条边*/border-top: #4285f4 solid;border-right: transparent solid;border-width: 85px; /* 其他设置 */margin: 50px;
}
参考文献
https://www.cnblogs.com/echolun/p/11888612.html
https://juejin.cn/post/6844903567795421197
https://vue3js.cn/interview
--The End--
系列正在更新:18/20
点击下方卡片解锁更多
创作不易,星标、点赞、在看 三连支持
面试官:CSS如何画一个三角形?原理是什么?相关推荐
- CSS 如何画一个三角形?原理是什么?
css 画三角形的原理是利用盒子边框完成的,实现步骤可以分为以下四步: 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为 0,仅保留边框 4.得到四个三角形,选择其中一个后,其他三角 ...
- CSS如何画一个三角形?
通常情况下,我们会使用图片或者svg去完成三角形效果图,但如果单纯使用css如何完成一个三角形呢? 实现过程似乎也并不困难,通过边框就可完成 盒子模型 <style>.border {wi ...
- CSS如何画一个三角形 + CSS如何画月亮
1.CSS画三角形 利用border属性就可以 . 原理如下: 给一个元素设置宽高都为0, width: 0px; height: 0px; 然后元素的 ...
- css画一个三角形,梯形,平行四边形
一 使用css简单的画一个三角形 1. 先来看看border的划分 .demo{width:100px;height:100px;border:3px red solid;} 2. 当盒子的宽度为0会 ...
- 使用CSS画一个三角形
效果图 全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...
- [css] CSS画一个三角形,CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
- 用css画一个三角形
用css画一个三角形 HTML: <div id="delta"></div> CSS: #delta{width: 0;height: 0;border- ...
- 如何用CSS画一个三角形?
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
- 知乎大V推荐!面试官6个灵魂拷问,原理+实战+视频+源码
概述 想了很久怎么样可以让文章的标题不那么悲观,但是各种文案都在我脑海里面不断的被否定,要么是不那么抓眼球,要么是立意不匹配.最后想了想,这个标题是真的符合我最近的感悟. 希望看过文章,能有同感的朋友 ...
最新文章
- XSLT基本语法和第一个实例
- GDCM:gdcm::DefinedTerms的测试程序
- HoloLens开发手记 - Unity development overview 使用Unity开发概述
- T-SQL with as 关键字
- 使用Maven Failsafe和JUnit @Category将集成测试与单元测试分开
- t4 tornado 模板
- linux 函数自动补全,Shell脚本中实现自动补全功能
- Java 日志管理最佳实践
- matlab 读取同一文件中所有图像_matlab 批量读取文件夹内所有图片的几种方法
- python能写dnf脚本么_python dnf
- 抖音下载android,抖音完整版
- 本地简易股票量化回测框架
- 邮件到达对方服务器但是没到邮箱,无法将邮件发送进到对方服务器,教你如何用手工探测...
- Excel中的Array Formula
- 地产行业信息化建设分析
- 校外使用校园网访问外网
- 电脑桌面图标变成长方形咋办_为什么我的界面上的图标全部被一个长方形的图标覆盖了?...
- ICLR22 自监督graph learning------------AUTOMATED SELF-SUPERVISED LEARNING FORGRAPHS--- 密歇根州立
- OS20190301
- 软件智能:aaas系统对AI的诠释-AI的可能的三个取向和必然的一个成果(演绎逻辑-必然的推理-的两个独立性:推论和定论)
热门文章
- DNS 的A name和C name的区别
- 电商大数据——用数据驱动电商和商业案例解析
- 大数据好学么?具体学什么?
- 若依前后台分离生成主子表
- 如何基于共享服务器模式shared server mode配置大池large pool
- 外校保研北大计算机条件,谈从山大到北大的保研经历
- 计算机集群英语怎么说,cluster是什么意思_cluster的翻译_音标_读音_用法_例句_爱词霸在线词典...
- NLTK(3)处理文本、分词、词干提取与词形还原
- sympy 符号函数求导
- 烤仔万花筒 | 明日,ART101首席艺术家LULU作品将于Tspace开售