当前位置: 首页 - 编程技术 - 文章正文

30 个案例教你用纯 CSS 实现常见的几何图形

xiaoqihv
三角形

传统 border 实现

我们知道,如果设置一个盒子的宽高为 0,盒子就会变成一个点。此时再给上下左右四个 border 一定的宽度和不同的颜色,那么单纯由 border 填充的盒子看起来是这样的:

但内容盒有宽高的时候,四个 border 的对接处就不是一个点,而是一个矩形(图中白色区域),这时候的border 看起来就会和现实中的边框差不多:

因此,要绘制三角形,核心就是设置盒子的宽高为 0,让 border 表现为一个三角形:

.delta { width: 0px; height: 0px; border: 50px solid; border-color: #43cea2 #185a9d #ff6b6b #83a4d4; } 当然,也可以给盒子一个宽高,只不过这时候我们就要将其设置为 IE 盒模型(box-sizing:border-box),以确保在始终保持盒子原尺寸的前提下,通过增加 border 的宽度使 border 向盒子内部聚拢:

.delta { width: 100px; height: 100px; box-sizing: border-box; border: 50px solid; border-color: #43cea2 #185a9d #ff6b6b #83a4d4; } 上面两种方法效果一样,接着根据实际情况隐藏其中三个三角形即可。我们这里只想要显示底下的三角形,所以其它三角形通过透明色隐藏,顶部的三角形则设置 border 宽度为 0 ,避免占用空间。

HTML:

CSS:

.delta { width: 0px; height: 0px; border: 50px solid transparent; border-bottom-color: #ff6b6b; border-top-width: 0px; } 效果如下:

源代码:codepen1点击预览

渐变实现

这种方法适合绘制直角三角形。假设要绘制一个红色的直角三角形,其实可以把它看作是一个矩形的一半,矩形从透明色渐变到红色:

div { width: 200px; height: 200px; background: linear-gradient(to right bottom,transparent 0%,transparent 50%,red 50%,red 100%); } svg 实现

clip-path 实现

div { width: 100px; height: 100px; background: red; clip-path: polygon(50% 0, 0 100%, 100% 100%); } transform 和 overflow 实现

假设要绘制这个三角形:

先试着把他的另一半补齐:

可以想象成这其实是由两个盒子上下堆叠而成的,下面的是绿色盒子,上面的是蓝色盒子,这个蓝色盒子倾斜摆放,并且超出绿色盒子的部分被隐藏了。因此最初可能是类似这样的:

那么反过来想一下,假设我们能够实现上图这个样式,接着设法把蓝色盒子超出绿色盒子的部分隐藏,并把绿色盒子设置为透明色,是不是就实现了最初的那个三角形了呢?

从布局上,我们考虑绿色盒子是相对定位的父元素,蓝色盒子是子元素(用伪元素来做),并且在绝对定位和 transform 的作用下,实现图中的效果。接下来我们要解决几个问题:

蓝色盒子和绿色盒子在宽高上的关系?从图中可以看出,蓝色盒子的边长基本等于绿色盒子的对角线长度。绿色盒子宽高都是 100px,因此对角线是 100√2 px,越等于 140px,因此蓝色盒子的边长就是 140px,也就是父盒子宽高的 140%。 蓝色盒子的绝对定位的 left 偏移多少?在绝对定位的设置上,我们可以让蓝色盒子并排放在绿色盒子左边,并且两者底边在同一条线上 蓝色盒子旋转多少度?从图中的几何关系很容易看出,经过上面绝对定位的设置之后,蓝色盒子应该再旋转45 度才能到达图中位置。不过这里要注意,蓝色盒子不是绕着自己的中心旋转的,而是绕着自己的右下角顶点旋转的,因此这里还得修改 transform-origin 的值 最后,还要把超出绿色盒子的部分隐藏,并且把绿色盒子的颜色设置为透明色。因此最终代码如下:

div { width: 100px; height: 100px; background: transparent; position: relative; overflow: hidden; } div::after { content: ‘’; width: 140%; height: 140%; background-color: #185a9d; position: absolute; left: -140%; bottom: 0; transform-origin: right bottom; transform: rotate(45deg) ; } 源代码:codepen2点击预览

字符实现

div::after { content:’\25b3’ color:red font-size: 60px } 基本不实用,因为无法设置背景颜色,也无法设置三角形的形状。

多矩形堆叠实现

HTML:

CSS:

.container { display:flex; flex-direction: column; align-items: center; div { height:1px; background: red; } } 三角形可以看作是多个宽度递增、高度极小的矩形自上而下堆叠在一起。这段代码绘制的图形接近于正三角形,如果要绘制直角三角形,可以设置 align-items: start,让矩形一致往左边靠拢。

这个方法基本也不实用,首先它会增加多余的 dom 结构,其次是这样的图形存在锯齿,不够美观。—— 要减少锯齿,我们可以尝试继续压缩矩形的高度,但这样意味着需要使用更多的 dom 来绘制出同等高度的三角形。

椭圆形

普通椭圆

椭圆的实现依靠的是 border-radius,因此有必要搞懂 border-radius 的具体含义。

通常情况下,想要设置一个 div 的圆角,我们可能会写出类似这样的代码:

border-radius: 12px 它实际上等价于下面的代码:

border-top-left-radius: 12px 12px border-top-right-radius: 12px 12px border-bottom-left-radius: 12px 12px border-bottom-left-radius: 12px 12px 也就是说,我们把 div 的左上角、右上角、左下角、右下角的某两个值都设置为 12px,那么这两个值是什么呢?它们其实指的是这四个角各自的水平半径和垂直半径。在这个例子中,我们的四个圆角,实际上都是一个半径为 12px 的圆的 1/4 弧。

这样我们也能理解圆的形成了。对于一个 100px * 100px 的 div,设置 border-radius:50%,就等于设置 div 四个角的水平半径为 div 宽的一半,垂直半径为 div 高的一半,这样形成的图形一定会是一个圆形。

同理,对于一个 200px * 100px 的 div,设置 border-radius:50%,就等于设置四个角的水平半径为 div 宽的一半,垂直半径为 div 高的一半,这样形成的图形一定会是一个椭圆形。

代码如下:

div { width: 200px; height: 100px; background: #185a9d; border-radius: 50%; } 特殊椭圆(鸡蛋形)

实现方式和普通椭圆类似。特点在于上半部分比下半部分要更加扁平,因此左上角和右上角圆角的垂直半径要更长,这里取整体高度的 60%,剩余的 40% 作为左下角和右下角圆角的垂直半径。代码如下:

HTML:

CSS:

.shape { width: 126px; height: 180px; background: #36d792; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } 源代码:codepen3点击预览

扇形

半圆

border-radius 实现:

先画一个长度为宽度两倍的矩形,再给左上角和右上角设置圆角即可(圆角半径等于宽度)

.shape { width: 200px; height:100px; background: #ff6b6b; border-radius:100px 100px 0 0; } overflow:hidden 实现:

让圆形的一半超出父元素并给父元素设置溢出隐藏

.shape { width: 200px; height: 100px; overflow: hidden; position: relative; } .shape::after { content:’’; position: absolute; width: 200px; height: 200px; background: #ff6b6b; border-radius: 50%; } 背景渐变实现(看上去是半圆):

可以将半圆看作是一个圆形从有颜色渐变到透明色

.shape { width: 200px; height:200px; border-radius: 50%; background-image: linear-gradient(to bottom,#ff6b6b 50%,transparent 50%) ; } border-left 实现(看上去是半圆):

.shape { width: 200px; height: 100px; border-top: 100px solid #ff6b6b; border-radius: 50%; } 1/4 圆

border-radius实现:

.shape { width: 120px; height: 120px; background: #ff6b6b; border-top-left-radius: 100%; } border 实现:

类似于三角形的实现

.shape { width: 0px; height: 0px; border: 100px solid transparent; border-top-color: #ff6b6b; border-radius: 100px; transform: rotate(-45deg); } overflow:hidden 实现

.shape { width: 100px; height: 100px; overflow: hidden; position: relative; } .shape::after { content:’’; position: absolute; width: 200px; height: 200px; background: #ff6b6b; border-radius: 50%; } 任意扇形

三角形 + 圆形 + 溢出隐藏 实现:

利用之前 border 实现三角形的方法,我们可以实现如下图所示、与圆心对准的的矩形。给圆形设置透明色和溢出隐藏,并且消除掉矩形不想显示的 border,就能得到扇形了。扇形的圆心角大小由 border-left-width 和 border-right-width 共同控制,这两者越大,圆心角也就越大 —— 但最大也只能是 180 度。

代码如下:

HTML:

CSS:

.shape { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; position: relative; } .shape::after { content:’’; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-top: 100px solid #ff6b6b; border-bottom: 100px solid transparent; } 源代码:codepen4点击预览

矩形 + 半圆 + 溢出隐藏 实现:

想象一下有一个绿色矩形,下面有一个直径与矩形长度相等的红色半圆,让半圆绕着圆心旋转,在这个过程中,绿色区域里面是不是就有一个角度不断变化的扇形呢?如下图所示:

因此,我们只要把绿色矩形设置为透明色,同时加上溢出隐藏的效果,就能通过改变半圆旋转的角度,在矩形内部形成一个扇形了。代码如下:

HTML:

CSS:

.shape { width: 200px; height: 100px; position: relative; overflow: hidden; } .shape::after { content:’’; position: absolute; width: 100%; height: 100%; top: 100%; background: #ff6b6b; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform-origin: top center; transform: rotate(30deg); } 效果如下:

源代码:codepen5点击预览

不过有个问题:这种方法实现的扇形,圆心角不能超过 180 度,那么对于圆心角大于 180 度的扇形怎么实现呢?我们改用两个半圆实现。

两个半圆实现: 一开始两个半圆是叠放在一起的,通过让上面的半圆绕着圆心旋转,就可以形成圆心角大于 180 度的扇形。如下图所示:

代码如下:

HTML:

CSS:

.shape { width: 200px; height: 100px; background: #36d793; border-radius: 50% 50% 0 0 / 100% 100% 0 0; position: relative; } .shape::before{ content:’’; position: absolute; background: #36d793; width: 200px; height: 100px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform-origin: bottom center; transform: rotate(30deg); } 源代码:codepen6点击预览

梯形

border 实现

前面说过,如果设置一个盒子宽高为 0,并给一定的 border,那么这个盒子看起来是这样的:

在此基础上,如果给这个盒子一个宽度,会发生什么事呢?盒子就会变成这样:

实际上这也是符合我们的直觉的,可以想象成是四个三角形的交接点被横向拉长了,三角形也跟着变化。现在这个图形已经包含梯形了,那么我们接下来的事情就很简单了,只需要把没用到的分块设置成透明色即可,因此最终代码如下:

HTML:

CSS:

.delta { width: 100px; height: 0px; border: 50px solid transparent; border-bottom-color: #ff6b6b; } 最终效果如下:

源代码:codepen7点击预览

梯形的大小: 通过设置 div.delta 的宽度,可以同时修改梯形的上下底长度;通过设置 border-left-width 和border-right-width 可以修改底角大小,border 越宽,底角越小。另外还可以设置 border-bottom-width,从而控制梯形的高度。有时候,我们可能希望一切的变化都是在确保原 div 大小不变的情况下进行的,这时候可以给 div 设置 box-sizing:border-box。

梯形的方向: 现在我们的梯形是朝上或者朝下的,如果想要设置方向为朝左或者朝右,可以纵向拉长对接点,也即保持 div 宽度为 0 的同时,给它一定的高度。

直角梯形: 这里只以一个方向为例进行介绍。对于下面这张图:

如果我们把它的 border-left-width 进行压缩,那么红色梯形的顶角就会往左边拖动,趋近于九十度:

当压缩到为 0 的时候,原先的等腰梯形就变成了如下图所示的直角梯形:

矩形+三角形实现

等腰梯形也可以看作是由一个矩形 + 两个直角三角形组成(其它梯形同理):

代码如下:

.shape { width: 200px; height: 120px; background-color: #36d792; position: relative; } .shape::before,.shape::after { content:’’; position: absolute; width: 0; height: 0; border-top: 60px solid white; border-bottom: 60px solid transparent; } .shape::before { border-left: 20px solid white; border-right: 20px solid transparent; left: 0; } .shape::after { border-left: 20px solid transparent; border-right: 20px solid white; right: 0; } 源代码:codepen8点击预览

平行四边形

这个比较简单,直接通过 transform:skew() 对矩形做倾斜处理即可。代码如下:

.shape { width: 200px; height: 120px; background-color: #36d792; transform: skew(20deg); } 6. 五角星

实际上,五角星可以看作是由三个三角形拼接而成的:

长度的设置:

为了方便后续计算,这里设法让顶部三角形的腰长为 130px,底长为 100px。即:设置顶部三角形的 border-bottom-width为 120px,,border-left-width 和 border-right-width 都为 50px。 下面两个三角形也都是等腰三角形,需要利用几何关系计算各边长度。显然,只要知道等腰三角形的面积和底边,那么就能推算出它的高,而高其实就是 border-bottom-width 。三角形各个边的边长为 130+502,130+502,(130+50)*2,根据海伦公式,可以由三边计算出一个三角形的面积,又由于底边已知,所以算出高为 143px,也即 border-bottom-width 为 143px,而 border-left 和 border-right 的宽度则为三角形底边的一半,也就是 180px。这样,两个三角形都能绘制出来了。 剩下的工作就是调整绝对定位的偏移量以及两个三角形旋转的角度。由于计算的偏差问题,这里得到的并不是标准的五角星,但总体思路是这样。 最终代码如下:

.shape { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 120px solid #36d792; position: relative; } .shape::before { content: ‘’; position: absolute; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 143px solid #36d792; top: 106px; left: -192px; transform: rotate(36deg); } .shape::after { content: ‘’; position: absolute; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 143px solid #36d792; top: 106px; left: -206px; transform: rotate(-36deg); } 源代码:codepen9点击预览

六角星

六角星用一个正三角形和一个倒三角形来做即可:

代码如下:

.shape { width: 0; height: 0; border: 50px solid transparent; border-bottom: 80px solid #36d792; position: relative; } .shape::after { content: ‘’; position: absolute; width: 0; height: 0; border: 50px solid transparent; border-top: 80px solid #36d792; top: 30px; left: -50px; } 源代码:codepen10点击预览

八角星

用两个矩形来做即可,其中一个矩形绕中心旋转 45 度就可以形成八角星。代码如下:

HTML:

CSS:

.shape { width:80px; height:80px; background: #36d792; position: relative; } .shape::after { content:’’; position: absolute; width:80px; height:80px; background: #36d792; transform: rotate(45deg); } 源代码:codepen11点击预览

十二角星

十二角星的做法和八角星类似,只是多了一个矩形以及旋转的角度不同而已。代码如下:

HTML:

CSS:

.shape { width:80px; height:80px; background: #36d792; position: relative; } .shape::before,.shape::after { content:’’; position: absolute; width:80px; height:80px; background: #36d792; } .shape::before { transform: rotate(30deg); } .shape::after { transform: rotate(-30deg); } 源代码:codepen12点击预览

五边形

为了避免繁琐的运算,这里采用口诀“九五顶五九,八五两边分”设置五边形的相关长度:

五边形看作是一个等腰三角形 + 等腰梯形即可,最终代码如下:

HTML:

CSS:

.shape { width:0; height:0; border: 80px solid transparent; border-top-width: 0px; border-bottom: 59px solid #36d792; position: relative; } .shape::after { content:’’; position: absolute; width:100px; height:0; border: 30px solid transparent; border-bottom-width:0px; border-top: 95px solid #36d792; left:-80px; top:59px; } 源代码:codepen13点击预览

六边形

六边形可以看作是由两个等腰三角形 + 一个矩形组成,也可以看作由两个等腰梯形组成,这里选择第二种。代码如下:

HTML:

CSS:

.shape { width:120px; height:0; border: 60px solid transparent; border-top-width: 0px; border-bottom: 104px solid #36d792; position: relative; } .shape::after { content:’’; position: absolute; width:120px; height:0; border: 60px solid transparent; border-bottom-width:0px; border-top: 104px solid #36d792; left:-60px; top:104px; } 源代码:codepen14

八边形

正八边形可以看作由两个等腰梯形 + 一个矩形组成,代码如下:

HTML:

CSS:

.shape { width:102px; height:42px; background: #36d792; position: relative; } .shape::before,.shape::after { content:’’; position: absolute; width:42px; height:0px; border: 30px solid transparent; } .shape::before { border-top-width:0px; border-bottom: 30px solid #36d792; top:-30px; } .shape::after { border-bottom-width:0px; border-top: 30px solid #36d792; top:42px; } 源代码:codepen15点击预览

13.菱形

普通菱形

普通菱形可以看作由两个三角形构成,代码如下:

HTML:

CSS:

.shape { width:0px; height:0px; border: 40px solid transparent; border-top-width:0px; border-bottom: 70px solid #36d792; position: relative; } .shape::before { content:’’; position: absolute; width:0px; height:0px; border: 40px solid transparent; border-bottom-width:0px; border-top: 70px solid #36d792; left:-40px; top:70px; } 源代码: codepen16点击预览

特殊菱形(九十度角)

仍然可以采用上面的方法,但更简单的方法是绕中心旋转一个正方形。代码如下:

HTML:

CSS:

body { margin:80px; } .shape { width:100px; height:100px; background: #36d792; transform: rotate(45deg); } 源代码:codepen17点击预览

盾形

HTML:

CSS:

.shape { width:0; height:0; border:50px solid transparent; border-top-width:0; border-bottom:20px solid #36d792; position: relative; } .shape::after { content:’’; position:absolute; width:0; height:0; border:50px solid transparent; border-bottom-width:0; border-top: 70px solid #36d792; left:-50px; top: 20px; } 源代码:codepen18点击预览

15.钻石形

HTML:

CSS:

.shape { width:35px; height:0; border:25px solid transparent; border-top-width:0; border-bottom:25px solid #36d792; position: relative; } .shape::after { content:’’; position:absolute; width:0; height:0; border:42px solid transparent; border-bottom-width:0; border-top: 70px solid #36d792; left:-25px; top: 25px; } 源代码:codepen19点击预览

太极图

这是最终要实现的效果:

虽然它似乎是由不规则的几何图形构成的,但实际上,我们可以用规则的几何图形堆叠形成太极图。简单地说,可以把它拆解成下面这样:

先用第三小节提到的背景渐变实现一个黑白对半圆:

.taiji { width:200px; height:200px; border-radius:50%; background-image: linear-gradient(to right,black 50%,white 50%); } 再实现两个黑白同心圆,其内圆半径和外环(外环可以用 border 来做)宽度根据几何关系求出即可,接着将同心圆分别定位到对半圆的最上面和最下面。

最终代码如下:

.taiji { width:200px; height:200px; border-radius:50%; background: linear-gradient(to right,black 50%,white 50%); position: relative; } .taiji::before,.taiji::after { content:’’; position: absolute; width: 20px; height: 20px; border-radius: 50%; left: -50%; } .taiji::before { background-color: white; border:40px solid black; top: 0; } .taiji::after { background-color: black; border:40px solid white; bottom: 0; } 让太极图动起来:

现在,可以设置在鼠标移入的时候让太极图旋转起来:

.taiji { animation: rotate 1s linear infinite; animation-play-state:paused; } .taiji:hover { animation-play-state:running; } @keyframes rotate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } 效果如下:

源代码:codepen20点击预览

17.爱心

爱心可以看作是由两个这样的形状经过旋转后形成的:

设置左图的 transform-origin 为右下角顶点,让其绕点顺时针旋转 45 度,右图的 transform-origin 为左下角顶点,让其绕点逆时针旋转 45 度,即可形成爱心(旋转 45 度是因为爱心的底角是 90 度)。代码如下:

HTML:

CSS:

.heart { position: relative; } .heart::before,.heart::after { content:’’; position: absolute; width:50px; height:80px; border-radius: 25px 25px 0 0; background: red; } .heart::before { transform-origin: right bottom; transform: rotate(45deg); } .heart::after { left:50px; transform-origin: left bottom; transform: rotate(-45deg); } 源代码:codepen21点击预览

18.无穷符号

无穷符号 ∞ 可以看作是由下面两个图形经过旋转构成的:

先画出两个圆环,取消第一个圆环右下角圆角,并将其逆时针旋转 45 度;取消第二个圆环左下角圆角,并将其顺时针旋转 45 度。代码如下:

HTML:

CSS:

.shape { position: relative; } .shape::before,.shape::after { content:’’; position: absolute; width: 60px; height: 60px; border: 20px solid #36d792; } .shape::before { border-radius: 50% 50% 0 50%; transform: rotate(-45deg); } .shape::after { border-radius: 50% 50% 50% 0; transform: rotate(45deg); } 得到的图形是这样的:

可以看到,圆环部分重叠了,所以需要将 ::after 伪元素右移,那么应该偏移多少呢?这里需要稍微计算一下。为了方便观察,我们修改两个图形的颜色和层级,并作适当的标注,得到下面这个图形:

对照开头的那张图可以看出,只要将 .shape::after 从 A 点右移到 B 点,就能形成一个 ∞ 的形状。AB 边这段距离是由两条斜边组成的,并且斜边都位于一个等腰直角三角形中,因此只要分别算出两个三角形的直角边(a 和 b),就能算出斜边。从图中可以看出,a 是 30 + 20 = 50,对应的斜边为 50√2,约为 70;b 是 30,对应的斜边为 30√2,约为 42,所以 AB 边长为 112,即 .shape::after 应该右移 112 px。修改代码如下:

.shape::after { border-radius: 50% 50% 50% 0; left: 112px; transform: rotate(45deg); } 这样,我们就能得到一个 ∞ 形状了。

源代码:codepen22点击预览

19.吃豆人

吃豆人实际上是一个圆心角为 270 度的扇形,可以采用之前绘制 1/4 圆的方法来实现。代码如下:

HTML:

CSS:

.shape { width: 0; height: 0; border: 100px solid #f5d54d; border-right-color: transparent; border-radius: 100px; position: relative; } .shape::before,.shape::after { content:’’; position: absolute; width: 24px; height: 24px; border-radius: 50%; } .shape::before { background: #000; top: -70px; left: 5px; } .shape::after { background: #f5d54d; top: -12px; left: 60px; } 源代码:codepen23点击预览

弯尾箭头

下图是一个常见的弯尾箭头图标:

这个图标可以看作由两个图形组成:一个是三角形,一个是弧线,弧线是通过 border + 圆角实现的。

先来绘制三角形:

HTML:

CSS:

.shape { width: 0; height: 0; border: 20px solid transparent; border-left-color: #198bf6; position: relative; transform: rotate(40deg); } 给 .shape 设置一个伪元素,将其 border-top 作为弧线,并设置圆角:

.shape::after { content: ‘’; position: absolute; width: 40px; height: 40px; border-top: 10px solid #198bf6; border-radius-top-left: 100px; } 弯曲程度,可以通过 width 和 border-radius 进行调节。

现在我们看到的就是这样的图形:

弧线是相对于三角形顶点定位的,需要相对于顶点左移 40+20 = 60px,再上移 10/2 = 5px:

.shape::after { left: -60px; top: -5px; } 最后就能得到刚开始的那个图标了。

源代码:codepen24点击预览

21.聊天气泡

类型1:

这是一个类似微信的聊天气泡。观察到三角形部分是带有圆角的,所以我们不采用三角形 + 矩形的做法,而是用旋转的正方形 + 矩形来做 —— 即让正方形相对矩形定位在中间后,旋转 45 度。代码如下:

HTML:

CSS:

.shape { width: 200px; height: 100px; background: #21d86d; position: relative; border-radius: 10px; } .shape::after { content:’’; position: absolute; width: 20px; height:20px; background: #21d86d; border-radius: 2px; top:50%; transform: translate(-35%,-50%) rotate(45deg); } 源代码:codepen25点击预览

类型2:

这种类型的气泡带有边框和背景颜色,我们仍然可以采用上面的做法即可,但要注意去掉正方形的两个边框。代码如下:

HTML:

CSS:

.shape { width: 200px; height: 100px; border-radius: 8px; background: #faf8f4; border: 1px solid #e6d9b3; position: relative; } .shape::after { content:’’; position: absolute; top: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 15px; height: 15px; background: #faf8f4; border: 1px solid #e6d9b3; border-style: none none solid solid } 源代码:codepen26点击预览

类型3:

这种是类似 QQ 的聊天气泡,这里弯曲的尾巴我们用 20 小节介绍的方法来做即可。代码如下:

HTML:

CSS:

.shape { width: 200px; height: 100px; background: #01a0ff; border-radius: 20px; position: relative; } .shape::after { content:’’; position: absolute; left: -20px; width: 40px; height: 40px; border-bottom: 20px solid #01a0ff; border-bottom-left-radius: 100px; } 源代码:codepen27点击预览

RSS 订阅

这是一个常见的 RSS feed 图标,圆角矩形和内部的白色圆点都是容易实现的。那么两段白色圆弧应该怎么实现呢?我们可能很容易想到,两段白色圆弧都分别是一个 1/4 红色圆形的边框,所以可以用下面的方式来做:

但这种方式无疑是很麻烦的,事实上,我们用 CSS3 的 box-shadow 内阴影来做会更加简单:

/ x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 内阴影 / box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) inset; 可以先在圆角矩形内画一个 1/4 圆,然后利用内阴影往圆里放三段相间的弧线(白色弧线、红色弧线和白色弧线),x 偏移量和 y 偏移量控制弧线的坐标,阴影扩散半径控制弧线的宽度。这种方式显然比第一种要简单得多。

最终代码如下:

HTML:

CSS:

.shape { width: 165px; height: 165px; padding: 35px; border-radius: 30px; background-color: #ff4802; position: relative; } .shape::before { content:’’; position: absolute; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; bottom: 40px; } .shape::after { content:’’; position: absolute; width: 165px; height: 165px; border-top-right-radius: 165px; box-shadow: -14px 14px 0 14px #fff inset, -28px 28px 0 28px #ff4802 inset, -42px 42px 0 42px #fff inset; } 源代码:codepen28点击预览

徽章缎带

徽章缎带可以看作是由一个圆形 + 两个三角形经过如下变换得到的:

HTML:

CSS:

.shape { position: relative; background: #00a1fb; height: 100px; width: 100px; border-radius: 50%; } .shape::before,.shape::after { content: ‘’; position: absolute; border: 40px solid transparent; border-bottom: 70px solid #00a1fb; border-top: none; top: 70px; } .shape::before { left: -10px; transform: rotate(-140deg); } .shape::after { right: -10px; transform: rotate(140deg); } 源代码:codepen29点击预览

TV 电视机

TV 电视机可以看作是由下面两个图形叠加在一起构成的:

两个图形的做法类似,都是给矩形设置一个水平半径和垂直半径相差很大的圆角。代码如下:

HTML:

CSS:

.shape { position: relative; width: 200px; height: 150px; margin: 20px 0; background: #00a1fb; border-radius: 50% / 10%; } .shape::after { content:’’; position: absolute; background-color: #00a1fb; top: 10%; bottom: 10%; left: -5%; right: -5%; border-radius: 5% / 50%; } 源代码:codepen30点击预览

放大镜

放大镜的实现也很简单。原文的做法是将放大镜的把手定位到右侧再进行旋转,其实我们可以直接将把手定位到正下方,然后去旋转 .shape 而不是 .shape::after,这样就可以方便地控制把手的朝向。

HTML:

CSS:

.shape { width: 80px; height: 80px; border: 20px solid #01a0fe; border-radius: 50%; position: relative; transform: rotate(-45deg); } .shape::after { content:’’; position: absolute; left: 50%; top: 90px; transform: translateX(-50%); width: 18px; height: 65px; background: #01a0fe; } 源代码:codepen31点击预览

Facebook

Facebook 的图标由三个元素构成:蓝色方块、横线和弧线。横线是个等腰梯形,用前面介绍的方法来做即可;弧线可以看作是圆角矩形的一部分,那怎么才能做到只在蓝色方块中显示这一部分呢?我们可以先画好一个蓝底白边的圆角矩形,只把它的一部分定位到蓝色方块中,再给蓝色方块设置溢出隐藏。如下图所示:

为了让白色字母 f 在还没接触蓝色方块右边缘的时候就产生溢出隐藏的效果,这里要给蓝色方块加上蓝色边框。

代码如下:

HTML:

CSS:

.shape { width: 100px; height: 110px; background-color: #3b589c; border-radius: 6px; border: 15px solid #3b589c; border-bottom: none; position: relative; overflow: hidden; } .shape::before { content: ‘’; position: absolute; width: 100px; height: 100px; background-color: #3b589c; border: 20px solid #fff; border-radius: 27px; left: 56px; } .shape::after { content: ‘’; position: absolute; top: 37px; left: 37px; width: 58px; height: 0; border-right: 4px solid transparent; border-top: 20px solid #fff; } 源代码:codepen32点击预览

月亮

月亮其实可以看作是由两个半径相同的圆不完全重叠后形成的:

那么实际实现中真的需要画两个圆吗?其实不需要,底下的圆用 CSS3 的 box-shadow 来做会更方便。

/ x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 / box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); 我们可以先画好一个圆,再给它设置阴影。x 偏移量和 y 偏移量共同控制月亮的形状和角度:

由于不需要模糊效果,所以模糊半径设置为 0;扩散半径可以控制月亮大小,若设置为 0 则表示与另一个圆大小相同;最后的阴影颜色属性则是控制月亮的颜色。

最终代码如下:

HTML:

CSS:

.shape { width:100px; height: 100px; border-radius: 50%; box-shadow: 40px 0px 0 0 #f4bd2e; } 源代码:codepen33点击预览

指示箭头

指示箭头可以有两种做法:

原文采用的是左图的做法,用一个矩形 + 两个三角形来实现,但我们无法确定指示箭头所处背景的颜色,所以无法确定第一个三角形应该采用什么颜色;如果采用右图的做法,则无需考虑背景颜色的问题,实现起来也更加简单(两个矩形 + skew 来实现即可)。

HTML:

CSS:

.shape { position: relative; } .shape::before,.shape::after { content:’’; position: absolute; width: 200px; height: 20px; background: #00a1fb; } .shape::before { transform: skew(45deg); } .shape::after { transform: skew(-45deg); top:20px; } 源代码:codepen34点击预览

HTML:

CSS:

body { margin: 100px; } .shape { width: 140px; height: 100px; background: #01a0ff; border-radius: 15px; position: relative; } .shape::before { content:’’; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 40px; border-radius: 10px; background: #fff; } .shape::after { content:’’; position: absolute; top: -63px; left: 50%; transform: translateX(-50%); width: 60px; height: 45px; border-radius: 48px 48px 0 0 / 48px 48px 0 0; border: 18px solid #01a0ff; border-bottom: none; } 源代码:codepen35点击预览

书签 / 旗帜

这是一个常见的书签 / 旗帜图标,用矩形 + 三角形实现即可。代码如下:

HTML:

采纳 CSS:

.flag { width: 56px; background-color: #009961; border-top-left-radius: 4px; border-top-right-radius: 4px; } .text { position: relative; padding: 9px 6px; text-align: center; color: white; } .text::after { content:’’; position: absolute; left: 0; top: 36px; border-width: 16px 28px; border-color: #009961; border-style: solid; border-bottom: 16px solid transparent; } 需要注意,矩形 .text::after是长方形而不是正方形,这需要通过 border-width 进行相关设置:由于整体宽度是需要和父盒子保持一致的,因此左右两个 border 的宽度都应该是整体宽度的一半。最后再通过绝对定位进行微调,就能得到上图的效果了。 ———————————————— 版权声明:本文为CSDN博主「爱前端也爱恋爱」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/l1063951462/article/details/114226579

文章地址:https://wenmayi.cn/post/243.html