前端怎么画三角形_用CSS画一个三角形
作者 | 李银城
三角形的场景很常见,打开一个页面可以看到各种各样的三角形:
由于div一般是四边形,要画个三角形并不是那么直观。你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦。
三角形其实可以用CSS画出来。如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形。
1、三角形的画法
三角形可以用border画出来,首先一个有四个border的div应该是这样的:
然后把它的高度和宽度去掉,剩下四个border,就变成了:
再把border-top去掉,没有了border-top就把上面的区域给裁掉了:
接下来,再让左右两边的border透明,就是一个三角形了:
这里是用了底部的border作为三角形,如果要取左边border,同理只需让上下两个border颜色为transparent,同时不要右边的border:
斜边在左边的三角形CSS代码如下:
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #000;
效果如下:
2、控制三角形的角度
上面画的三角形是一个直角三角形,用得比较多的应该是等边三角形,那么怎样画一个等边三角形呢?
首先,保持border-left和border-right的大小不变,让border-bottom不断变大,观察下形状是怎么变的:
可以看到顶部的角度在不断变小,换句话说三角形底边长不变,而底边的高在不断地变大,因为border-bottom-width其实就是底边的高:
然后再做第二个实验,让border-left不断地变大,其它两个border保持不变:
通过上下对比,看出border-left变大增加了左边那条边的长度。由此可以想到,如果右边的border-width是0的话,那么它将是一个直角三角形,并且直角在右下角:
即代码为:
border-left: 60px solid transparent;
border-right: 0 solid transparent;
border-bottom: 40px solid #000;
border-right为0,也就是border-right可以和width、height一样不用设置,两行代码即可。其中border-left决定了底部直角边的长度,而border-bottom决定了右边直角边的长度,刚好跟直观的想法相反。明白这一点很重要。
同时,通过切换四个border的设置就可以控制直角边在不同的位置,例如如果想要直角边在右上角的话,那应该是设置border-left和border-top,读者可以自行想象一下。
回到上面的问题,怎样画一个等边三角形,等边三角形的底边的高是底边的1/sqrt(2)倍。
经过上面的分析可以知道,底边是由border-left加上border-right的长度合起来的,而底边的高是border-bottom,所以如果border-bottom-width是40px,那么border-left和border-right的宽度都是40px * sqrt(2) / 2 ~= 28px,约等于28px。验证一下:
确实画出了一个等边三角形。到这里你可能会有一个疑问:上面取了约等,因为像素大小是不能为小数,但是上面是28个px,舍掉的小数相对很小,如果我画的三角形本来就比较小,像那种下拉的右边的三角形,舍去个小数影响比较大,这时候怎么办?其实这个问题本身是无解的,因为你要画的区域就那么小,要想画个绝对等边的三角形本身就有难度,就算用其它的办法也会有一样的困境。
3、画一个有边缘色的三角形
这种三角形很常见,特别是tip的提示框、聊天消息的框等:
上面实现是用了一个图标字体,跟svg差不多,但是同于高度没有那么刚刚好,导致它看起来有点错位了。如果用CSS画,就不会有这种问题。
这种画法其实很简单,只是不容易想到——就是先画一个深色的三角形,然后再画一个同样大小白色的三角形盖在它上面,两个三角形错位2个像素,这样深色三角形的边缘就刚好露出一个像素。
首先画一个深色的三角形:
代码如下:
.chat-msg {
width: 300px;
height: 80px;
border: 1px solid #ccc;
position: relative;
}
.chat-msg:before{
position: absolute;
left: -10px;
top: 34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #ccc;
}
效果如下:
然后再画一个白色的三角形盖上去,错位两个像素
CSS代码如下:
.chat-msg:before{
position: absolute;
left: -8px;
top: 34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #fff;
效果如下:
到这里就说明完了,上面用的属性都是CSS 2最基本的一些属性,所以没有兼容性问题。这个方法的缺点是没办法设置三角形的box-shadow的轮廓为一个三角形,所以用不了box-shadow。
推荐阅读
前端怎么画三角形_用CSS画一个三角形相关推荐
- css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- css竖向箭头符号_用css打造一个三角形箭头
3)方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况,但是在颜色方面确实单一的,我们只能由一种颜色,那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候,我们应该怎么做呢?比如鼠标 ...
- [css] 用css创建一个三角形,并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
- [css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
- HTML之CSS画三角形原理,使用css画三角形的方法代码
用纯css画个三角形以下是源代码: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/ ...
- html画圆圈原理,用CSS画圆
我曾经向大家分享了一个非常巧妙的用纯CSS画三角形的技巧.在过去的一年里,我发现这种用CSS画三角形的技术非常的有用和高效,尤其是创建提示框/提示符等类似的网页效果上.另外一种也可以用CSS简单的实现 ...
- ai怎么画路线_使用AI画一个离心管
介绍 今天有粉丝提问,如何使用AI画一个离心管,对于这种由线条和简单的色彩组成的图,还是比较好画的.还有就是涉及到一些小工具的用法,配合着使用就可以画出来了.怎么样,你来学学吗?安排呗! 软件 Ado ...
- css 绘制三角形_解释CSS形状:如何使用纯CSS绘制圆,三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- python canvas画弧度_用Python画樱花?想得美就能画得美(下)
上一篇我们介绍了一种手绘玫瑰的方法,你当然也可以用类似的方法画一朵或者几朵樱花 咯,看你的艺术底子了. 不过今天我们用优美的数学方法来画樱花,也会很漂亮的. 先画朵太阳花暖暖身吧. import tu ...
最新文章
- 陈杰院士:多无人系统协同中的人工智能安全探索
- python使用字典格式化字符串-python实现字符串和字典的转换
- GitHub 上值得关注的 iOS 开源项目
- VMP分析之VM解码循环与基本架构(一)
- 出入口控制系统工程设计规范_【理论冲刺】传说中的隐藏书目——《公园设计规范》...
- SQL中几个比较重要的系统表
- CodeForces - 1066C Books Queries(思维)
- Wannafly挑战赛14 F
- 用私有构造器或枚举类型强化Singleton属性(3)
- C#正则表达式获取html标签之间的内容
- Java太阳系行星运动模型
- Android JNI的调用过程
- 基于ARM的嵌入式SMTP远程控制设计
- 897-了解微服务网关
- Java校验时间段重叠
- JAVA毕业设计Vue网上书籍购买商城登录计算机源码+lw文档+系统+调试部署+数据库
- 二、STS开发工具安装 + 创建WEB工程
- 读书心得《男人来自火星,女人来自金星》
- RealFlow在线教程翻译(11)——SPH - Particles (Liquid) (液体粒子)
- 中学生怎样才能合理使用计算机,运用计算机技术提高中学生学习效率的精编.doc...
热门文章
- sqlloader 导入数据的一点经验教训(最后附我的导入过程)
- Javaweb自驾游景点查询网站设计与实现
- 新零售背景下“农村淘宝“线下和线上服务
- moviepy音视频剪辑:颜色相关变换函数blackwhite、colorx、fadein/out、gamma_corr、invert_colors、lum_contrast、mask_color介绍
- IEtester 中文官方网站 raquo; IETester 最新版下载 V0.4.6 支持WIN7 支持IE9 马上下载
- 单片机定时器计数原理
- python的自省与反射
- 计算机无法用u盘重装系统,电脑进不了系统怎么用u盘重装系统?
- 为什么说jsp被替代了_您说什么:最喜欢的Windows资源管理器替代品
- 用传感器建立地球中枢神经系统可预警天灾