45 个值得收藏的 CSS 形状

喜欢ヅ旅行 2021-07-31 20:14 431阅读 0赞

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

本文经 SegmentFault （公众号ID：segmentfault\_sudo）授权转载，作者：前端小智

**前言**

由于此订阅号换了个皮肤，导致用户接受文章不及时。读者可以打开订阅号「Web项目聚集地」，选择置顶（标星）公众号，重磅干货，第一时间送达！

**正文**

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 CSS 伪元素中的 `::before` 和 `::after`，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。

虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。

## 1. 正方形 ##

![640?wx\_fmt=png][640_wx_fmt_png]

#square {	
      width: 100px;	
      height: 100px;	
      background: red;	
    }

## 2. 长方形 ##

![640?wx\_fmt=png][640_wx_fmt_png 1]

#rectangle {	
      width: 200px;	
      height: 100px;	
      background: red;	
    }

## 3. 圆形 ##

![640?wx\_fmt=png][640_wx_fmt_png 2]

#circle {	
      width: 100px;	
      height: 100px;	
      background: red;	
      border-radius: 50%	
    }

## 4. 椭圆形 ##

![640?wx\_fmt=png][640_wx_fmt_png 3]

#oval {	
      width: 200px;	
      height: 100px;	
      background: red;	
      border-radius: 100px / 50px;	
    }

## 5. 上三角 ##

![640?wx\_fmt=png][640_wx_fmt_png 4]

#triangle-up {	
      width: 0;	
      height: 0;	
      border-left: 50px solid transparent;	
      border-right: 50px solid transparent;	
      border-bottom: 100px solid red;	
    }

## 6. 下三角 ##

![640?wx\_fmt=png][640_wx_fmt_png 5]

#triangle-down {	
      width: 0;	
      height: 0;	
      border-left: 50px solid transparent;	
      border-right: 50px solid transparent;	
      border-top: 100px solid red;	
    }

## 7. 左三角 ##

![640?wx\_fmt=png][640_wx_fmt_png 6]

#triangle-left {	
      width	
    : 0;	
      height: 0;	
      border-top: 50px solid transparent;	
      border-right: 100px solid red;	
      border-bottom: 50px solid transparent;	
    }

## 8. 右三角 ##

![640?wx\_fmt=png][640_wx_fmt_png 7]

#triangle-right {	
      width: 0;	
      height: 0;	
      border-top: 50px solid transparent;	
      border-left: 100px solid red;	
      border-bottom: 50px solid transparent;	
    }

## 9. 左上角 ##

![640?wx\_fmt=png][640_wx_fmt_png 8]

#triangle-topleft {	
      width: 0;	
      height: 0;	
      border-top: 100px solid red;	
      border-right: 100px solid transparent;	
    }

## 10. 右上角 ##

![640?wx\_fmt=png][640_wx_fmt_png 9]

#triangle-topright {	
      width: 0;	
      height: 0;	
      border-top: 100px solid red;	
      border-left: 100px solid transparent;	
    }

## 11. 左下角 ##

![640?wx\_fmt=png][640_wx_fmt_png 10]

#triangle-bottomleft {	
      width: 0;	
      height: 0;	
      border-bottom: 100px solid red;	
      border-right: 100px solid transparent;	
    }

## 12. 右下角 ##

![640?wx\_fmt=png][640_wx_fmt_png 11]

#triangle-bottomright {	
      width: 0;	
      height: 0;	
      border-bottom: 100px solid red;	
      border-left: 100px solid transparent;	
    }

## 13. 箭头 ##

![640?wx\_fmt=png][640_wx_fmt_png 12]

#curvedarrow {	
      position: relative;	
      width: 0;	
      height: 0;	
      border-top: 9px solid transparent;	
      border-right: 9px solid red;	
      transform: rotate(10deg);	
    }	
    #curvedarrow:after {	
      content: "";	
      position: absolute;	
      border: 0 solid transparent;	
      border-top: 3px solid red;	
      border-radius: 20px 0 0 0;	
      top: -12px;	
      left: -9px;	
      width: 12px;	
      height: 12px;	
      transform: rotate(45deg);	
    }

## 14. 梯形 ##

![640?wx\_fmt=png][640_wx_fmt_png 13]

#trapezoid {	
      border-bottom: 100px solid red;	
      border-left: 25px solid transparent;	
      border-right: 25px solid transparent;	
      height: 0;	
      width: 100px;	
    }

## 15. 平行四边形 ##

![640?wx\_fmt=png][640_wx_fmt_png 14]

#parallelogram {	
      width: 150px;	
      height: 100px;	
      transform: skew(20deg);	
      background: red;	
    }

## 16. 星星 (6角) ##

![640?wx\_fmt=png][640_wx_fmt_png 15]

#star-six {	
      width: 0;	
      height: 0;	
      border-left: 50px solid transparent;	
      border-right: 50px solid transparent;	
      border-bottom: 100px solid red;	
      position: relative;	
    }	
    #star-six:after {	
      width: 0;	
      height: 0;	
      border-left: 50px solid transparent;	
      border-right: 50px solid transparent;	
      border-top: 100px solid red;	
      position: absolute;	
      content: "";	
      top: 30px;	
      left: -50px;	
    }

## 17. 星星 (5角) ##

![640?wx\_fmt=png][640_wx_fmt_png 16]

#star-five {	
      margin: 50px 0;	
      position: relative;	
      display: block;	
      color: red;	
      width: 0px;	
      height: 0px;	
      border-right: 100px solid transparent;	
      border-bottom: 70px solid red;	
      border-left: 100px solid transparent;	
      transform: rotate(35deg);	
    }	
    #star-five:before {	
      border-bottom: 80px solid red;	
      border-left: 30px solid transparent;	
      border-right: 30px solid transparent;	
      position: absolute;	
      height: 0;	
      width: 0;	
      top: -45px;	
      left: -65px;	
      display: block;	
      content: '';	
      transform: rotate(-35deg);	
    }	
    #star-five:after {	
      position: absolute;	
      display: block;	
      color: red;	
      top: 3px;	
      left: -105px;	
      width: 0px;	
      height: 0px;	
      border-right: 100px solid transparent;	
      border-bottom: 70px solid red;	
      border-left: 100px solid transparent;	
      transform: rotate(-70deg);	
      content: '';	
    }

## 18. 五边形 ##

![640?wx\_fmt=png][640_wx_fmt_png 17]

#pentagon {	
      position: relative;	
      width: 54px;	
      box-sizing: content-box;	
      border-width: 50px 18px 0;	
      border-style: solid;	
      border-color: red transparent;	
    }	
    #pentagon:before {	
      content: "";	
      position: absolute;	
      height: 0;	
      width: 0;	
      top: -85px;	
      left: -18px;	
      border-width: 0 45px 35px;	
      border-style: solid;	
      border-color: transparent transparent red;	
    }

## 19. 六边形 ##

![640?wx\_fmt=png][640_wx_fmt_png 18]

#hexagon {	
      width: 100px;	
      height: 55px;	
      background: red;	
      position: relative;	
    }	
    #hexagon:before {	
      content: "";	
      position: absolute;	
      top: -25px;	
      left: 0;	
      width: 0;	
      height: 0;	
      border-left: 50px solid transparent;	
      border-right: 50px solid transparent;	
      border-bottom: 25px solid red;	
    }	
    #hexagon:after {	
      content: "";	
      position: absolute;	
      bottom: -25px;	
      left: 0;	
      width: 0;	
      height: 0;	
      border-left: 50px solid transparent;	
      border-right: 50px solid transparent;	
      border-top: 25px solid red;	
    }

## 20. 八边形 ##

![640?wx\_fmt=png][640_wx_fmt_png 19]

#octagon {	
      width: 100px;	
      height: 100px;	
      background: red;	
      position: relative;	
    }	
    #octagon:before {	
      content: "";	
      width: 100px;	
      height: 0;	
      position: absolute;	
      top: 0;	
      left: 0;	
      border-bottom: 29px solid red;	
      border-left: 29px solid #eee;	
      border-right: 29px solid #eee;	
    }	
    #octagon:after {	
      content: "";	
      width: 100px;	
      height: 0;	
      position: absolute;	
      bottom: 0;	
      left: 0;	
      border-top: 29px solid red;	
      border-left: 29px solid #eee;	
      border-right: 29px solid #eee;	
    }

## 21. 爱心 ##

![640?wx\_fmt=png][640_wx_fmt_png 20]

#heart {	
      position: relative;	
      width: 100px;	
      height: 90px;	
    }	
    #heart:before,	
    #heart:after {	
      position: absolute;	
      content: "";	
      left: 50px;	
      top: 0;	
      width: 50px;	
      height: 80px;	
      background: red;	
      border-radius: 50px 50px 0 0;	
      transform: rotate(-45deg);	
      transform-origin: 0 100%;	
    }	
    #heart:after {	
      left: 0;	
      transform: rotate(45deg);	
      transform-origin: 100% 100%;	
    }

## 22. 无穷大 ##

![640?wx\_fmt=png][640_wx_fmt_png 21]

#infinity {	
      position: relative;	
      width: 212px;	
      height: 100px;	
      box-sizing: content-box;	
    }	
    #infinity:before,	
    #infinity:after {	
      content: "";	
      box-sizing: content-box;	
      position: absolute;	
      top: 0;	
      left: 0;	
      width: 60px;	
      height: 60px;	
      border: 20px solid red;	
      border-radius: 50px 50px 0 50px;	
      transform: rotate(-45deg);	
    }	
    #infinity:after {	
      left: auto;	
      right: 0;	
      border-radius: 50px 50px 50px 0;	
      transform: rotate(45deg);	
    }

## 23. 菱形 ##

![640?wx\_fmt=png][640_wx_fmt_png 22]

#diamond {	
      width: 0;	
      height: 0;	
      border: 50px solid transparent;	
      border-bottom-color: red;	
      position: relative;	
      top: -50px;	
    }	
    #diamond:after {	
      content: '';	
      position: absolute;	
      left: -50px;	
      top: 50px;	
      width: 0;	
      height: 0;	
      border: 50px solid transparent;	
      border-top-color: red;	
    }

## 24. 钻石 ##

![640?wx\_fmt=png][640_wx_fmt_png 23]

#diamond-shield {	
      width: 0;	
      height: 0;	
      border: 50px solid transparent;	
      border-bottom: 20px solid red;	
      position: relative;	
      top: -50px;	
    }	
    #diamond-shield:after {	
      content: '';	
      position: absolute;	
      left: -50px;	
      top: 20px;	
      width: 0;	
      height: 0;	
      border: 50px solid transparent;	
      border-top: 70px solid red;	
    }

## 25. 钻戒 ##

![640?wx\_fmt=png][640_wx_fmt_png 24]

#diamond-narrow {	
      width: 0;	
      height: 0;	
      border: 50px solid transparent;	
      border-bottom: 70px solid red;	
      position: relative;	
      top: -50px;	
    }	
    #diamond-narrow:after {	
      content: '';	
      position: absolute;	
      left: -50px;	
      top: 70px;	
      width: 0;	
      height: 0;	
      border: 50px solid transparent;	
      border-top: 70px solid red;	
    }

## 26. 钻石2 ##

![640?wx\_fmt=png][640_wx_fmt_png 25]

#cut-diamond {	
      border-style: solid;	
      border-color: transparent transparent red transparent;	
      border-width: 0 25px 25px 25px;	
      height: 0;	
      width: 50px;	
      box-sizing: content-box;	
      position: relative;	
      margin: 20px 0 50px 0;	
    }	
    #cut-diamond:after {	
      content: "";	
      position: absolute;	
      top: 25px;	
      left: -25px;	
      width: 0;	
      height: 0;	
      border-style: solid;	
      border-color: red transparent transparent transparent;	
      border-width: 70px 50px 0 50px;	
    }

## 27. 蛋蛋 ##

![640?wx\_fmt=png][640_wx_fmt_png 26]

#egg {	
      display: block;	
      width: 126px;	
      height: 180px;	
      background-color: red;	
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;	
    }

## 28. 吃豆人 ##

![640?wx\_fmt=png][640_wx_fmt_png 27]

#pacman {	
      width: 0px;	
      height: 0px;	
      border-right: 60px solid transparent;	
      border-top: 60px solid red;	
      border-left: 60px solid red;	
      border-bottom: 60px solid red;	
      border-top-left-radius: 60px;	
      border-top-right-radius: 60px;	
      border-bottom-left-radius: 60px;	
      border-bottom-right-radius: 60px;	
    }

## 29. 对话泡泡 ##

![640?wx\_fmt=png][640_wx_fmt_png 28]

#talkbubble {	
      width: 120px;	
      height: 80px;	
      background: red;	
      position: relative;	
      -moz-border-radius: 10px;	
      -webkit-border-radius: 10px;	
      border-radius: 10px;	
    }	
    #talkbubble:before {	
      content: "";	
      position: absolute;	
      right: 100%;	
      top: 26px;	
      width: 0;	
      height: 0;	
      border-top: 13px solid transparent;	
      border-right: 26px solid red;	
      border-bottom: 13px solid transparent;	
    }

## 30. 12点 爆发 ##

![640?wx\_fmt=png][640_wx_fmt_png 29]

#burst-12 {	
      background: red;	
      width: 80px;	
      height: 80px;	
      position: relative;	
      text-align: center;	
    }	
    #burst-12:before,	
    #burst-12:after {	
      content: "";	
      position: absolute;	
      top: 0;	
      left: 0;	
      height: 80px;	
      width: 80px;	
      background: red;	
    }	
    #burst-12:before {	
      transform: rotate(30deg);	
    }	
    #burst-12:after {	
      transform: rotate(60deg);	
    }

## 31. 8点 爆发 ##

![640?wx\_fmt=png][640_wx_fmt_png 30]

#burst-8 {	
      background: red;	
      width: 80px;	
      height: 80px;	
      position: relative;	
      text-align: center;	
      transform: rotate(20deg);	
    }	
    #burst-8:before {	
      content: "";	
      position: absolute;	
      top: 0;	
      left: 0;	
      height: 80px;	
      width: 80px;	
      background: red;	
      transform: rotate(135deg);	
    }

## 32. 太极 ##

![640?wx\_fmt=png][640_wx_fmt_png 31]

#yin-yang {	
      width: 96px;	
      box-sizing: content-box;	
      height: 48px;	
      background: #eee;	
      border-color: red;	
      border-style: solid;	
      border-width: 2px 2px 50px 2px;	
      border-radius: 100%;	
      position: relative;	
    }	
    #yin-yang:before {	
      content: "";	
      position: absolute;	
      top: 50%;	
      left: 0;	
      background: #eee;	
      border: 18px solid red;	
      border-radius: 100%;	
      width: 12px;	
      height: 12px;	
      box-sizing: content-box;	
    }	
    #yin-yang:after {	
      content: "";	
      position: absolute;	
      top: 50%;	
      left: 50%;	
      background: red;	
      border: 18px solid #eee;	
      border-radius: 100%;	
      width: 12px;	
      height: 12px;	
      box-sizing: content-box;	
    }

## 33. 徽章丝带 ##

![640?wx\_fmt=png][640_wx_fmt_png 32]

#badge-ribbon {	
      position: relative;	
      background: red;	
      height: 100px;	
      width: 100px;	
      border-radius: 50px;	
    }	
    #badge-ribbon:before,	
    #badge-ribbon:after {	
      content: '';	
      position: absolute;	
      border-bottom: 70px solid red;	
      border-left: 40px solid transparent;	
      border-right: 40px solid transparent;	
      top: 70px;	
      left: -10px;	
      transform: rotate(-140deg);	
    }	
    #badge-ribbon:after {	
      left: auto;	
      right: -10px;	
      transform: rotate(140deg);	
    }

## 34. 太空入侵者（电脑游戏名） ##

![640?wx\_fmt=png][640_wx_fmt_png 33]

#space-invader {	
      box-shadow: 0 0 0 1em red,	
      0 1em 0 1em red,	
      -2.5em 1.5em 0 .5em red,	
      2.5em 1.5em 0 .5em red,	
      -3em -3em 0 0 red,	
      3em -3em 0 0 red,	
      -2em -2em 0 0 red,	
      2em -2em 0 0 red,	
      -3em -1em 0 0 red,	
      -2em -1em 0 0 red,	
      2em -1em 0 0 red,	
      3em -1em 0 0 red,	
      -4em 0 0 0 red,	
      -3em 0 0 0 red,	
      3em 0 0 0 red,	
      4em 0 0 0 red,	
      -5em 1em 0 0 red,	
      -4em 1em 0 0 red,	
      4em 1em 0 0 red,	
      5em 1em 0 0 red,	
      -5em 2em 0 0 red,	
      5em 2em 0 0 red,	
      -5em 3em 0 0 red,	
      -3em 3em 0 0 red,	
      3em 3em 0 0 red,	
      5em 3em 0 0 red,	
      -2em 4em 0 0 red,	
      -1em 4em 0 0 red,	
      1em 4em 0 0 red,	
      2em 4em 0 0 red;	
      background: red;	
      width: 1em;	
      height: 1em;	
      overflow: hidden;	
      margin: 50px 0 70px 65px;	
    }

## 35. 电视 ##

![640?wx\_fmt=png][640_wx_fmt_png 34]

#tv {	
      position: relative;	
      width: 200px;	
      height: 150px;	
      margin: 20px 0;	
      background: red;	
      border-radius: 50% / 10%;	
      color: white;	
      text-align: center;	
      text-indent: .1em;	
    }	
    #tv:before {	
      content: '';	
      position: absolute;	
      top: 10%;	
      bottom: 10%;	
      right: -5%;	
      left: -5%;	
      background: inherit;	
      border-radius: 5% / 50%;	
    }

## 36. 雪佛龙 ##

![640?wx\_fmt=png][640_wx_fmt_png 35]

#chevron {	
      position: relative;	
      text-align: center;	
      padding: 12px;	
      margin-bottom: 6px;	
      height: 60px;	
      width: 200px;	
    }	
    #chevron:before {	
      content: '';	
      position: absolute;	
      top: 0;	
      left: 0;	
      height: 100%;	
      width: 51%;	
      background: red;	
      transform: skew(0deg, 6deg);	
    }	
    #chevron:after {	
      content: '';	
      position: absolute;	
      top: 0;	
      right: 0;	
      height: 100%;	
      width: 50%;	
      background: red;	
      transform: skew(0deg, -6deg);	
    }

## 37. 放大镜 ##

![640?wx\_fmt=png][640_wx_fmt_png 36]

#magnifying-glass {	
      font-size: 10em;	
      display: inline-block;	
      width: 0.4em;	
      box-sizing: content-box;	
      height: 0.4em;	
      border: 0.1em solid red;	
      position: relative;	
      border-radius: 0.35em;	
    }	
    #magnifying-glass:before {	
      content: "";	
      display: inline-block;	
      position: absolute;	
      right: -0.25em;	
      bottom: -0.1em;	
      border-width: 0;	
      background: red;	
      width: 0.35em;	
      height: 0.08em;	
      transform: rotate(45deg);	
    }

## 38. Facebook图标 ##

![640?wx\_fmt=png][640_wx_fmt_png 37]

#facebook-icon {	
      background: red;	
      text-indent: -999em;	
      width: 100px;	
      height: 110px;	
      box-sizing: content-box;	
      border-radius: 5px;	
      position: relative;	
      overflow: hidden;	
      border: 15px solid red;	
      border-bottom: 0;	
    }	
    #facebook-icon:before {	
      content: "/20";	
      position: absolute;	
      background: red;	
      width: 40px;	
      height: 90px;	
      bottom: -30px;	
      right: -37px;	
      border: 20px solid #eee;	
      border-radius: 25px;	
      box-sizing: content-box;	
    }	
    #facebook-icon:after {	
      content: "/20";	
      position: absolute;	
      width: 55px;	
      top: 50px;	
      height: 20px;	
      background: #eee;	
      right: 5px;	
      box-sizing: content-box;	
    }

## 39. 月亮 ##

![640?wx\_fmt=png][640_wx_fmt_png 38]

#moon {	
      width: 80px;	
      height: 80px;	
      border-radius: 50%;	
      box-shadow: 15px 15px 0 0 red;	
    }

## 40. 旗 ##

![640?wx\_fmt=png][640_wx_fmt_png 39]

#flag {	
      width: 110px;	
      height: 56px;	
      box-sizing: content-box;	
      padding-top: 15px;	
      position: relative;	
      background: red;	
      color: white;	
      font-size: 11px;	
      letter-spacing: 0.2em;	
      text-align: center;	
      text-transform: uppercase;	
    }	
    #flag:after {	
      content: "";	
      position: absolute;	
      left: 0;	
      bottom: 0;	
      width: 0;	
      height: 0;	
      border-bottom: 13px solid #eee;	
      border-left: 55px solid transparent;	
      border-right: 55px solid transparent;	
    }

## 41. 圆锥 ##

![640?wx\_fmt=png][640_wx_fmt_png 40]

#cone {	
      width: 0;	
      height: 0;	
      border-left: 70px solid transparent;	
      border-right: 70px solid transparent;	
      border-top: 100px solid red;	
      border-radius: 50%;	
    }

## 42. 十字架 ##

![640?wx\_fmt=png][640_wx_fmt_png 41]

#cross {	
      background: red;	
      height: 100px;	
      position: relative;	
      width: 20px;	
    }	
    #cross:after {	
      background: red;	
      content: "";	
      height: 20px;	
      left: -40px;	
      position: absolute;	
      top: 40px;	
      width: 100px;	
    }

## 43. 根基 ##

![640?wx\_fmt=png][640_wx_fmt_png 42]

#base {	
      background: red;	
      display: inline-block;	
      height: 55px;	
      margin-left: 20px;	
      margin-top: 55px;	
      position: relative;	
      width: 100px;	
    }	
    #base:before {	
      border-bottom: 35px solid red;	
      border-left: 50px solid transparent;	
      border-right: 50px solid transparent;	
      content: "";	
      height: 0;	
      left: 0;	
      position: absolute;	
      top: -35px;	
      width: 0;	
    }

## 44. 指示器 ##

![640?wx\_fmt=png][640_wx_fmt_png 43]

#pointer {	
      width: 200px;	
      height: 40px;	
      position: relative;	
      background: red;	
    }	
    #pointer:after {	
      content: "";	
      position: absolute;	
      left: 0;	
      bottom: 0;	
      width: 0;	
      height: 0;	
      border-left: 20px solid white;	
      border-top: 20px solid transparent;	
      border-bottom: 20px solid transparent;	
    }	
    #pointer:before {	
      content: "";	
      position: absolute;	
      right: -20px;	
      bottom: 0;	
      width: 0;	
      height: 0;	
      border-left: 20px solid red;	
      border-top: 20px solid transparent;	
      border-bottom: 20px solid transparent;	
    }

## 45. 锁 ##

![640?wx\_fmt=png][640_wx_fmt_png 44]

#lock {	
      font-size: 8px;	
      position: relative;	
      width: 18em;	
      height: 13em;	
      border-radius: 2em;	
      top: 10em;	
      box-sizing: border-box;	
      border: 3.5em solid red;	
      border-right-width: 7.5em;	
      border-left-width: 7.5em;	
      margin: 0 0 6rem 0;	
    }	
    #lock:before {	
      content: "";	
      box-sizing: border-box;	
      position: absolute;	
      border: 2.5em solid red;	
      width: 14em;	
      height: 12em;	
      left: 50%;	
      margin-left: -7em;	
      top: -12em;	
      border-top-left-radius: 7em;	
      border-top-right-radius: 7em;	
    }	
    #lock:after {	
      content: "";	
      box-sizing: border-box;	
      position: absolute;	
      border: 1em solid red;	
      width: 5em;	
      height: 8em;	
      border-radius: 2.5em;	
      left: 50%;	
      top: -1em;	
      margin-left: -2.5em;	
    }

译文：segmentfault.com/a/1190000018922732原文：https://css-tricks.com/the-shapes-of-css/

**推****荐****阅****读**

***1.***

***2.***

***3.***

***4.***

![640?][640]

[640_wx_fmt_jpeg]: /images/20210731/021d5b3251e343e9843cad0ff60ea56a.png?wx_fmt=jpeg
[640_wx_fmt_png]: /images/20210731/af1e4471b5b044bdbf21756f03b21e80.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/cf0c4538e3ad44068d3845a27ed35cc7.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/1d450e95cd674d0c8eca856def6502dc.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210731/be3a28e06b5047dc84c66eae9148bd8c.png?wx_fmt=png
[640_wx_fmt_png 4]: /images/20210731/562becbb2a3348a182134c8fd81b63f1.png?wx_fmt=png
[640_wx_fmt_png 5]: /images/20210731/9a09ea8c0eac4f7ab5301e44b23a0c53.png?wx_fmt=png
[640_wx_fmt_png 6]: /images/20210731/e2115f851a66491eb32de0df4a51c971.png?wx_fmt=png
[640_wx_fmt_png 7]: /images/20210731/a6906e8dff804e82bad7ff068c209428.png?wx_fmt=png
[640_wx_fmt_png 8]: /images/20210731/9cbb105942c4452f886f3d3986290611.png?wx_fmt=png
[640_wx_fmt_png 9]: /images/20210731/1e6dcbde603240eb9764d3d9cd185c0a.png?wx_fmt=png
[640_wx_fmt_png 10]: /images/20210731/47c19fda65194700b4a40af3e473ea90.png?wx_fmt=png
[640_wx_fmt_png 11]: /images/20210731/6761f8f779664566bdc56ffe0e3cc068.png?wx_fmt=png
[640_wx_fmt_png 12]: /images/20210731/09070370347f4212bd88920c13f993fc.png?wx_fmt=png
[640_wx_fmt_png 13]: /images/20210731/65211504748a41718ea51ac74cd27e27.png?wx_fmt=png
[640_wx_fmt_png 14]: /images/20210731/05882adb65ba47d9bdbbc80d7b77e134.png?wx_fmt=png
[640_wx_fmt_png 15]: /images/20210731/8284183047634f5cb00845a906ab6ff8.png?wx_fmt=png
[640_wx_fmt_png 16]: /images/20210731/0b8a347783214f0d9dbe99c2a3c7a8a4.png?wx_fmt=png
[640_wx_fmt_png 17]: /images/20210731/bf02dc31519947128ef27c9c1c0cd29c.png?wx_fmt=png
[640_wx_fmt_png 18]: /images/20210731/265ec49c6d42400e82be30b82d9b8dea.png?wx_fmt=png
[640_wx_fmt_png 19]: /images/20210731/3681307baef740f58733e60f87ac9334.png?wx_fmt=png
[640_wx_fmt_png 20]: /images/20210731/bc3af09b06714e72b952c40c7b7fef80.png?wx_fmt=png
[640_wx_fmt_png 21]: /images/20210731/8695ea78712d49fc973f66100946ae8f.png?wx_fmt=png
[640_wx_fmt_png 22]: /images/20210731/e8f71dc9b74e448898c98b85e698ebca.png?wx_fmt=png
[640_wx_fmt_png 23]: /images/20210731/15db907f748647558f9b318e3b6d3549.png?wx_fmt=png
[640_wx_fmt_png 24]: /images/20210731/82c9886136e14268be1fe746cdd49578.png?wx_fmt=png
[640_wx_fmt_png 25]: /images/20210731/a58bb330bd434fc18f34068b044857e9.png?wx_fmt=png
[640_wx_fmt_png 26]: /images/20210731/37496eb050254bac9fba53560c35ac50.png?wx_fmt=png
[640_wx_fmt_png 27]: /images/20210731/a8a09504219a4231b03a4e80e54ef6f2.png?wx_fmt=png
[640_wx_fmt_png 28]: /images/20210731/b4387e0ae8a14ba2bd1fc4858a9ba554.png?wx_fmt=png
[640_wx_fmt_png 29]: /images/20210731/877f7be56a704f71ad28abbc5036c696.png?wx_fmt=png
[640_wx_fmt_png 30]: /images/20210731/e2adff8430b14a279a78ca41f328a27a.png?wx_fmt=png
[640_wx_fmt_png 31]: /images/20210731/029996c8cdb2429ebd43a5a281c36391.png?wx_fmt=png
[640_wx_fmt_png 32]: /images/20210731/7935f0271c29411eb34093bf94e21962.png?wx_fmt=png
[640_wx_fmt_png 33]: /images/20210731/05714aef4ac64205adf2777e2653864b.png?wx_fmt=png
[640_wx_fmt_png 34]: /images/20210731/5d2f45f441a74fdbbfc159e617c70a08.png?wx_fmt=png
[640_wx_fmt_png 35]: /images/20210731/1bdc7816db3d48b9a9e700b5993a6467.png?wx_fmt=png
[640_wx_fmt_png 36]: /images/20210731/9aac72da1f8546cbae0b8f2e035437c4.png?wx_fmt=png
[640_wx_fmt_png 37]: /images/20210731/5e202a4459cf47f096b975f8f4236fa2.png?wx_fmt=png
[640_wx_fmt_png 38]: /images/20210731/66718e4657c34bb9bb7b0ea23111d67d.png?wx_fmt=png
[640_wx_fmt_png 39]: /images/20210731/8c9eb7dba4df463eb0bdc63c13711256.png?wx_fmt=png
[640_wx_fmt_png 40]: /images/20210731/1796633bee924ed785fadaf3149d158f.png?wx_fmt=png
[640_wx_fmt_png 41]: /images/20210731/991a7d4e1a53464ea789e1ebb6a41679.png?wx_fmt=png
[640_wx_fmt_png 42]: /images/20210731/e600f8535a604cd4b004aa12053e683d.png?wx_fmt=png
[640_wx_fmt_png 43]: /images/20210731/b777931914dc466fbf2db78bd3505305.png?wx_fmt=png
[640_wx_fmt_png 44]: /images/20210731/51ef2a6221c340d0ad757a18cab59575.png?wx_fmt=png
[640]: /images/20210731/a664e5165781473e896c1c6057981acb.png?