用CSS绘制最常见的40种形状和图形

超、凢脫俗 2022-03-21 06:52 142阅读 0赞

## Square(正方形) ##

![40个纯CSS绘制的图形0][40_CSS_0]

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

## Rectangle(矩形) ##

![40个纯CSS绘制的图形1][40_CSS_1]

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

## Circle(圆形) ##

![40个纯CSS绘制的图形2][40_CSS_2]

#circle {
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }
    
    /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

## Oval(椭圆形) ##

![40个纯CSS绘制的图形3][40_CSS_3]

#oval {
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }
    
    /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

## Triangle Up(向上的三角形) ##

![40个纯CSS绘制的图形4][40_CSS_4]

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

## Triangle Down(向下) ##

![40个纯CSS绘制的图形5][40_CSS_5]

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

## Triangle Left(向左) ##

![40个纯CSS绘制的图形6][40_CSS_6]

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

## Triangle Right(向右) ##

![40个纯CSS绘制的图形7][40_CSS_7]

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

## Triangle Top Left(左上) ##

![40个纯CSS绘制的图形8][40_CSS_8]

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

## Triangle Top Right(右上) ##

![40个纯CSS绘制的图形9][40_CSS_9]

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

## Triangle Bottom Left(左下) ##

![40个纯CSS绘制的图形10][40_CSS_10]

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

## Triangle Bottom Right(右下) ##

![40个纯CSS绘制的图形11][40_CSS_11]

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

## Curved Tail Arrow(弯尾箭头) ##

![40个纯CSS绘制的图形12][40_CSS_12]

![40个纯CSS绘制的图形13][40_CSS_13]

#curvedarrow {
      position: relative;
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-right: 9px solid red;
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -o-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;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    }

## Trapezoid(梯形) ##

![40个纯CSS绘制的图形14][40_CSS_14]

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

## Parallelogram(平行四边形) ##

![40个纯CSS绘制的图形15][40_CSS_15]

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

## Star (6-points)(六角星) ##

![40个纯CSS绘制的图形16][40_CSS_16]

#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;
    }

## Star (5-points)(五角星) ##

![40个纯CSS绘制的图形17][40_CSS_17]

#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;
       -moz-transform:    rotate(35deg);
       -webkit-transform: rotate(35deg);
       -ms-transform:     rotate(35deg);
       -o-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: '';
       -webkit-transform: rotate(-35deg);
       -moz-transform:    rotate(-35deg);
       -ms-transform:     rotate(-35deg);
       -o-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;
       -webkit-transform: rotate(-70deg);
       -moz-transform:    rotate(-70deg);
       -ms-transform:     rotate(-70deg);
       -o-transform:      rotate(-70deg);
       content: '';
    }

## Pentagon(五边形) ##

![40个纯CSS绘制的图形18][40_CSS_18]

#pentagon {
        position: relative;
        width: 54px;
        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;
    }

## Hexagon(六边形) ##

![40个纯CSS绘制的图形19][40_CSS_19]

#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;
    }

## Octagon(八边形) ##

![40个纯CSS绘制的图形20][40_CSS_20]

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

## Heart(心形) ##

![40个纯CSS绘制的图形21][40_CSS_21]

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

## Infinity(无限符图形) ##

![40个纯CSS绘制的图形22][40_CSS_22]

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

## Diamond Square(菱形) ##

![40个纯CSS绘制的图形23][40_CSS_23]

#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;
    }

## Diamond Shield（钻石盾牌） ##

![40个纯CSS绘制的图形24][40_CSS_24]

#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;
    }

## Diamond Narrow ##

![40个纯CSS绘制的图形25][40_CSS_25]

#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;
    }

## Cut Diamond(砖石形) ##

![40个纯CSS绘制的图形26][40_CSS_26]

#cut-diamond {
        border-style: solid;
        border-color: transparent transparent red transparent;
        border-width: 0 25px 25px 25px;
        height: 0;
        width: 50px;
        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;
    }

## Egg(鸡蛋) ##

![40个纯CSS绘制的图形27][40_CSS_27]

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

## Pac-Man(吃豆人) ##

![40个纯CSS绘制的图形28][40_CSS_28]

#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;
    }

## Talk Bubble（聊天框） ##

![40个纯CSS绘制的图形29][40_CSS_29]

#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;
    }

## 12 Point Burst（爆炸形状） ##

![40个纯CSS绘制的图形30][40_CSS_30]

#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 {
        -webkit-transform: rotate(30deg);
           -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
             -o-transform: rotate(30deg);
    }
    #burst-12:after {
        -webkit-transform: rotate(60deg);
           -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
             -o-transform: rotate(60deg);
    }

## Yin Yang(阴阳八卦) ##

![40个纯CSS绘制的图形31][40_CSS_31]

#yin-yang {
        width: 96px;
        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;
    }
    
    #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius:100%;
        width: 12px;
        height: 12px;
    }

## Badge Ribbon(徽章丝带) ##

![40个纯CSS绘制的图形32][40_CSS_32]

#badge-ribbon {
     position: relative;
     background: red;
     height: 100px;
     width: 100px;
     -moz-border-radius:    50px;
     -webkit-border-radius: 50px;
     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;
      -webkit-transform: rotate(-140deg);
      -moz-transform:    rotate(-140deg);
      -ms-transform:     rotate(-140deg);
      -o-transform:      rotate(-140deg);
    }
    
    #badge-ribbon:after {
      left: auto;
      right: -10px;
      -webkit-transform: rotate(140deg);
      -moz-transform:    rotate(140deg);
      -ms-transform:     rotate(140deg);
      -o-transform:      rotate(140deg);
    }

## Space Invader（太空入侵者） ##

![40个纯CSS绘制的图形33][40_CSS_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;
      }

## TV Screen（电视屏幕） ##

![40个纯CSS绘制的图形34][40_CSS_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%;
    }

## Chevron（雪佛龙） ##

![40个纯CSS绘制的图形35][40_CSS_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;
      -webkit-transform: skew(0deg, 6deg);
      -moz-transform: skew(0deg, 6deg);
      -ms-transform: skew(0deg, 6deg);
      -o-transform: skew(0deg, 6deg);
      transform: skew(0deg, 6deg);
    }
    #chevron:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background: red;
      -webkit-transform: skew(0deg, -6deg);
      -moz-transform: skew(0deg, -6deg);
      -ms-transform: skew(0deg, -6deg);
      -o-transform: skew(0deg, -6deg);
      transform: skew(0deg, -6deg);
    }

## Magnifying Glass（放大镜） ##

![40个纯CSS绘制的图形36][40_CSS_36]

#magnifying-glass{
     font-size: 10em; /* This controls the size. */
     display: inline-block;
     width: 0.4em;
     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;
     -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
    }

## Facebook Icon（Facebook图标） ##

![40个纯CSS绘制的图形37][40_CSS_37]

#facebook-icon {
      background: red;
      text-indent: -999em;
      width: 100px;
      height: 110px;
      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;
    }
    #facebook-icon::after {
      content: "/20";
      position: absolute;
      width: 55px;
      top: 50px;
      height: 20px;
      background: #eee;
      right: 5px;
    }

## Cone(圆锥形) ##

![40个纯CSS绘制的图形38][40_CSS_38]

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

## Moon(月亮) ##

![40个纯CSS绘制的图形39][40_CSS_39]

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

## Cross（十字架） ##

![40个纯CSS绘制的图形40][40_CSS_40]

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

[40_CSS_0]: /images/20220321/186cbed1a03648a19034e808757ce6da.png
[40_CSS_1]: /images/20220321/ebf231250ef047b38314fa7fe3867a25.png
[40_CSS_2]: /images/20220321/43b0c4edfb5e41f0b875432e6df76b35.png
[40_CSS_3]: /images/20220321/2f38d035d0f04d89a22253917abd58dd.png
[40_CSS_4]: /images/20220321/0237ade1696b47b6bd859a7cb44db168.png
[40_CSS_5]: /images/20220321/cb4689c62d42432d915797f1f089ffba.png
[40_CSS_6]: /images/20220321/2c8ac8dbc6ce4041961de09dc477d5d9.png
[40_CSS_7]: /images/20220321/9aa590f65b26424c9b9bffed289b0aed.png
[40_CSS_8]: /images/20220321/52cd30f851ce4281bc3830b290da1a8c.png
[40_CSS_9]: /images/20220321/29e9c161dc9c470c9ad30e492f7cc493.png
[40_CSS_10]: /images/20220321/6ff0c93860ed42f1a30c6ded7ff2b3a0.png
[40_CSS_11]: /images/20220321/6ac4a5a63e2b4768a36950e00d2da85f.png
[40_CSS_12]: /images/20220321/a3da4664e77e40a28473a55a5c5a36fd.png
[40_CSS_13]: /images/20220321/5d9aec97ef744b7387c502f204a80f10.png
[40_CSS_14]: /images/20220321/86df8d39100e403a8754a54b4c52d654.png
[40_CSS_15]: /images/20220321/366938df4eda46458c3013da311e5ee5.png
[40_CSS_16]: /images/20220321/cc2ac921d4a2425daf76b9ca7e986100.png
[40_CSS_17]: /images/20220321/de45f02653a94c3faf4df4d266e45b88.png
[40_CSS_18]: /images/20220321/879a463389dc4cfbb2185abcc31c387e.png
[40_CSS_19]: /images/20220321/54ac05bbfb684307884d320097ef9966.png
[40_CSS_20]: /images/20220321/474243b5daa94dd1b556838b1413c00a.png
[40_CSS_21]: /images/20220321/46262489642b41078b68978d50dd7c33.png
[40_CSS_22]: /images/20220321/00d6eab3b3c04f38a55e8aef9c190725.png
[40_CSS_23]: /images/20220321/4ead9262a79c447883d8ccceababb40c.png
[40_CSS_24]: /images/20220321/80f17c46bd83400b82da2416a7e4cd10.png
[40_CSS_25]: /images/20220321/1710d15f7a974edab4d264f37593d28c.png
[40_CSS_26]: /images/20220321/3b47568f28e44948a523fc4acd14fe53.png
[40_CSS_27]: /images/20220321/f55a2c0794f64a75acdb61cf2566006b.png
[40_CSS_28]: /images/20220321/ef8cc902933d4ceba2f6b495a0461f50.png
[40_CSS_29]: /images/20220321/f2bc5fe5a2f0455593cf68eef04639e0.png
[40_CSS_30]: /images/20220321/0af94b90795d49e482676865c02a8e8a.png
[40_CSS_31]: /images/20220321/6c8e5c02bf3a4ec181257ad38bc42c36.png
[40_CSS_32]: /images/20220321/947001ef711b417292049213934563fe.png
[40_CSS_33]: /images/20220321/b8ab6766b8b3489a94bd9b6d77c8d29e.png
[40_CSS_34]: /images/20220321/c1802a9a5f264f88887667604fad3777.png
[40_CSS_35]: /images/20220321/79c1a613f1cb42fdb840963183b17cc2.png
[40_CSS_36]: /images/20220321/c63470ac508e47faae91a9784b6f74ff.png
[40_CSS_37]: /images/20220321/02633e706cd44fe98d6883137b94333f.png
[40_CSS_38]: /images/20220321/eba806811d5d4a8dbc2790b550648196.png
[40_CSS_39]: /images/20220321/ebcdefa0ba0f4986af0092f1723db830.png
[40_CSS_40]: /images/20220321/8edc97beeac448a7b78acfdd57b3894a.png