关于css:30-个案例教你用纯-CSS-实现常见的几何图形

42次阅读

共计 20559 个字符，预计需要花费 52 分钟才能阅读完成。

本文会介绍一些常见几何图形的 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 种画法与浏览器的凋谢世界

正文完
css
发表至： css
2021-02-09
 0
关于css:css实现文字左右两端对齐
关于前端:巧用-SVG-滤镜还能制作表情包
关于css:CSS简介与选择器
关于css:我在乐字节学习前端的第三天学习笔记H5CSS3面试题总结