Effective前端(3)用CSS画一个三角形-阿里云开发者社区

开发者社区> 华山青竹> 正文

Effective前端(3)用CSS画一个三角形

简介: 来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观。你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦。
+关注继续查看

来源:https://zhuanlan.zhihu.com/p/26160325

三角形的场景很常见,打开一个页面可以看到各种各样的三角形:

由于div一般是四边形,要画个三角形并不是那么直观。你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦。三角形其实可以用CSS画出来。如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形。

1. 三角形的画法

三角形可以用border画出来,首先一个有四个border的div应该是这样的:

然后把它的高度和宽度去掉,剩下四个border,就变成了:

再把border-top去掉,没有了border-top就把上面的区域给裁掉了:

接下来,再让左右两边的border透明,就是一个三角形了:

这里是用了底部的border作为三角形,如果要取左边border,同理只需让上下两个border颜色为transparent,同时不要右边的border:

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个像素,这样深色三角形的边缘就刚好露出一个像素。

首先画一个深色的三角形:

<style>
.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;
}
</style>
 
<div class="chat-msg">hi,亲</div>

效果如下:

然后再画一个白色的三角形盖上去,错位两个像素

.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-tricks,但是这种由于借助了transform等属性,所以兼容性没有画一个三角形的好,并且大小不好扩展,你要改它的大小,要么你知道它画的原理,然后一个个去改各个构成的属性位置和大小,要么用scale,用scale会有文档流占用空间不一致的问题。所以这种比较复杂的css画法,实用性并不是很大,还不如用个图标字体

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端笔记:css3动画transition和animation
前端笔记:css3动画transition和animation
22 0
前端学习 --Css -- 子元素的伪类
:first-child 寻找父元素的第一个子元素,在所有的子元素中排序; :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序; :nth-child 寻找父元素中的指定位置子元素,在所有的子元素中排序; :first-of-type 寻找指定类型中的第一个子元素 :last...
909 0
前端学习 -- Css -- 选择器的优先级
当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。
888 0
H5移动前端开发常用高能css3汇总
1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强  html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-select: none; //禁止长按复制选择 -webki...
731 0
前端学习 -- Css -- 文本标签
em和strong - 这两个标签都表示一个强调的内容, em主要表示语气上的强调,em在浏览器中默认使用斜体显示 strong表示强调的内容,比em更强烈,默认使用粗体显示 DOCTYPE html> 今夕何夕兮,搴舟中流。
778 0
C# Graphic 绘制圆、三角形、椭圆、图片
原文:C# Graphic 绘制圆、三角形、椭圆、图片 在form和panel上可以绘制图形,线段,圆,文字,图形等等。 绘制代码必须放在OnPaint()函数里面,因为窗体刷新的时候,都会调用该函数,重新刷新所绘的图。
1472 0
前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不能。
705 0
+关注
华山青竹
一个喜欢玩代码的小青年呵呵呵
543
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载