1. 三角形

传统 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 来绘制出同等高度的三角形。

1. 椭圆形

普通椭圆

椭圆的实现依靠的是 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点击预览

1. 扇形

半圆

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点击预览

1. 梯形

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点击预览

1. 平行四边形

这个比较简单，直接通过 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点击预览

1. 六角星

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

代码如下：

.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点击预览

1. 八角星

用两个矩形来做即可，其中一个矩形绕中心旋转 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点击预览

1. 十二角星

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

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点击预览

1. 五边形

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

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

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点击预览

1. 六边形

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

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

1. 八边形

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

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点击预览

1. 盾形

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点击预览

1. 太极图

这是最终要实现的效果：

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

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

.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点击预览

1. 弯尾箭头

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

这个图标可以看作由两个图形组成：一个是三角形，一个是弧线，弧线是通过 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点击预览

1. 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点击预览

1. 徽章缎带

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

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点击预览

1. 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点击预览

1. 放大镜

放大镜的实现也很简单。原文的做法是将放大镜的把手定位到右侧再进行旋转，其实我们可以直接将把手定位到正下方，然后去旋转 .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点击预览

1. 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点击预览

1. 月亮

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

那么实际实现中真的需要画两个圆吗？其实不需要，底下的圆用 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点击预览

1. 指示箭头

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

原文采用的是左图的做法，用一个矩形 + 两个三角形来实现，但我们无法确定指示箭头所处背景的颜色，所以无法确定第一个三角形应该采用什么颜色；如果采用右图的做法，则无需考虑背景颜色的问题，实现起来也更加简单（两个矩形 + 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点击预览

1. 锁

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点击预览

1. 书签 / 旗帜

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

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

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

1. css三实现ui,纯CSS实现常见的UI效果

   原标题:纯CSS实现常见的UI效果 转自:掘金 - alphardex 前言 切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...

2. CSS绘制常见的几何图形

   题外话 在写网页的过程,必不可免的会碰到网站需要装饰一些几何图形; 实现的方式无非四种: 图片 CSS2.1&3 SVG Canvas 就我个人而言,对于一些常见的几何图形. 图片是不推荐的[ ...

3. html5 css3制作柱形图,一步一步教你实现纯CSS的柱形图

   烈火网教程 CSS在处理排版之强大,没有做不到,只有想不到.下面我们将一同实现一个柱状图.先打好一个具体的框架.我们利用无序列表做整体,里面的东西我们根本选择内联无素span,strong,em来填充 ...

4. html如何自定义一个动画效果,30个纯css动画代码片段和效果演示

   开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...

5. css加号图标_手把手教你打造一个纯CSS图标库

   来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库: 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/s ...

6. 纯CSS无hacks的跨游览器多列布局(转)

   转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...

7. 01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

   若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...

8. c语言实现图片轮播,纯css实现轮播图

   轮播图的实现原理其实是比较简单的 举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把 好了,先介绍个 cs ...

9. 纯CSS实现圆角阴影的折角效果

   纯CSS实现圆角阴影的折角效果  2016-10-04 13:14   网页设计   标签:css   1637    2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...

最新文章

1. 【CV】Pytorch一小时入门教程-代码详解
2. HTML属性——180226
3. 皮一皮：这是。。。养了个白眼狼？？？
4. NVIDIA Jetson Xavier NX中安装的python库包的版本
5. 监视和管理GlassFish 3的多种方法
6. html5游戏开发box2djs,Box2D.js简易示例
7. php中循环跳过,php for循环的exit / break / continue /goto 停止、跳过循环、继续循环...
8. 任务1：WS2812B彩灯控制和按键控制（arduino程序）
9. 微信小程序使用VantUI框架
10. 移动端车牌识别SDK应用
11. 使用mask雕刻镂空背景
12. 【一起学系列】之迭代器组合：虽然有点用不上啦
13. 数据结构练习题【哈夫曼树、图、排序、散列表】
14. GD32f103ret6 使用HID，设备管理里，提示未知设备
15. centos 配置证书_如何在CentOS 8上设置和配置证书颁发机构（CA）
16. C++ concurrentqueue资料
17. 双离合档把上按钮作用_求双离合档位详细解释
18. 人事考试在线报名系统新突破，一键触达“智慧考试”
19. 良心的vscode主题推荐
20. 国内外一些软件开发公司

热门文章

1. trove mitaka集成
2. 再肝一个R包！一行代码绘制精美火山图！
3. ios开发中如何调用苹果自带地图导航
4. ubuntu 从刷机到yolov5环境搭建训练记录
5. Redis——过期时间/过期回收策略
6. 交大『云观CD-ROMIII』直接由CD-ROM执行之安装法(转)
7. 嵌入式实践项目（二）——机房温度监控系统
8. C#登录拍拍，总是提示输入有误
9. 用户登录短信验证码的实现
10. “开源是一个自我实现的预言”，Shifu创始人陈永立说道