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

本文会介绍一些常见几何图形的 CSS 绘制方案，思路参考自 The shapes of CSS 一文以及网上的其它文章，部分地方会做适当的修改和补充。

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：

<div class="delta"></div>

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 实现

<svg width="100" height="100">
  <polygon points="50,0 100,100 0,100" style="fill: red;"/>
</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：

<div class="container">
  <div style="width: 1px"></div>
  <div style="width: 2px"></div>
  <div style="width: 3px"></div>
  <div style="width: 4px"></div>
  <div style="width: 5px"></div>
  <div style="width: 6px"></div>
</div>

CSS：

.container {
    display:flex;
    flex-direction: column;
    align-items: center;
    div {
        height:1px;
        background: red;
    }    
}

三角形可以看作是多个宽度递增、高度极小的矩形自上而下堆叠在一起。这段代码绘制的图形接近于正三角形，如果要绘制直角三角形，可以设置 align-items: start，让矩形一致往左边靠拢。

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

2. 椭圆形

普通椭圆

椭圆的实现依靠的是 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：

<div class="shape"></div>

CSS：

.shape {
  width: 126px;
  height: 180px;
  background: #36d792;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

源代码：codepen3

3. 扇形

半圆

• 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：

  <div class="shape"></div>

  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：

  <div class="shape"></div>

  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：

<div class="shape"></div>

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

4. 梯形

border 实现

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

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

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

HTML：

<div class="shape"></div>

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

5. 平行四边形

这个比较简单，直接通过 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+50*2，130+50*2，(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

7. 六角星

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

代码如下：

.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

8. 八角星

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

HTML：

<div class="shape"></div>

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

9. 十二角星

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

HTML：

<div class="shape"></div>

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

10. 五边形

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

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

HTML：

<div class="shape"></div>

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

11. 六边形

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

HTML：

<div class="shape"></div>

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]()

12. 八边形

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

HTML：

<div class="shape"></div>

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：

<div class="shape"></div>

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：

<div class="shape"></div>

CSS：

body {
  margin:80px;
}
.shape {
  width:100px;
  height:100px;
  background: #36d792;
  transform: rotate(45deg);
}

源代码：codepen17

14. 盾形

HTML：

<div class="shape"></div>

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：

<div class="shape"></div>

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

16. 太极图

这是最终要实现的效果：

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

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

.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：

<div class="heart"></div>

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：

<div class="shape"></div>

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：

<div class="shape"></div>

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

20. 弯尾箭头

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

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

先来绘制三角形：

HTML：

<div class="shape"></div>

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：

<div class="shape"></div>

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：

<div class="shape"></div>

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：

<div class="shape"></div>

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

22. 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：

<div class="shape"></div>

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

23. 徽章缎带

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

HTML：

<div class="shape"></div>

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

24. TV 电视机

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

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

HTML：

<div class="shape"></div>

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

25. 放大镜

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

HTML：

<div class="shape"></div>

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

26. Facebook

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

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

代码如下：

HTML：

<div class="shape"></div>

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

27. 月亮

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

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

/ x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 /
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

我们可以先画好一个圆，再给它设置阴影。x 偏移量和 y 偏移量共同控制月亮的形状和角度：

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

最终代码如下：

HTML：

<div class="shape"></div>

CSS：

.shape {
  width:100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 40px 0px 0 0 #f4bd2e;
}

源代码：codepen33

28. 指示箭头

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

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

HTML：

<div class="shape"></div>

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

29. 锁

HTML：

<div class="shape"></div>

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

30. 书签 / 旗帜

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

HTML：

<div class="flag">
    <div class="text">采纳</div>
</div>

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 的宽度都应该是整体宽度的一半。最后再通过绝对定位进行微调，就能得到上图的效果了。

源代码：codepen36

参考：

The shapes of CSS

三角形的 N 种画法与浏览器的开放世界