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

   <p>今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。</p>    <h2><strong>Square(正方形)</strong></h2>    <pre>  <code class="language-css">#square {      width: 100px;      height: 100px;      background: red;  }</code></pre>    <h2><strong>Rectangle(矩形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/076522cdef2d33e7ca1a125937b4de25.png"></p>    <pre>  <code class="language-css">#rectangle {      width: 200px;      height: 100px;      background: red;  }</code></pre>    <h2><strong>Circle(圆形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8804d09634f826e11ff615df84e217bb.png"></p>    <pre>  <code class="language-css">#circle {      width: 100px;      height: 100px;      background: red;      -moz-border-radius: 50px;      -webkit-border-radius: 50px;      border-radius: 50px;  }    /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */</code></pre>    <h2><strong>Oval(椭圆形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d83143fc2d22171b1895f0476b1be44d.png"></p>    <pre>  <code class="language-css">#oval {      width: 200px;      height: 100px;      background: red;      -moz-border-radius: 100px / 50px;      -webkit-border-radius: 100px / 50px;      border-radius: 100px / 50px;  }    /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */</code></pre>    <h2><strong>Triangle Up(向上的三角形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4ce2c6ebf8de577588641ea0498d47a5.png"></p>    <pre>  <code class="language-css">#triangle-up {      width: 0;      height: 0;      border-left: 50px solid transparent;      border-right: 50px solid transparent;      border-bottom: 100px solid red;  }</code></pre>    <h2><strong>Triangle Down(向下)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c2366d075230c05db3f8fe36acd043e3.png"></p>    <pre>  <code class="language-css">#triangle-down {      width: 0;      height: 0;      border-left: 50px solid transparent;      border-right: 50px solid transparent;      border-top: 100px solid red;  }</code></pre>    <h2><strong>Triangle Left(向左)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/df4ec8da514cf054d1b4bbb03a1ba96e.png"></p>    <pre>  <code class="language-css">#triangle-left {      width: 0;      height: 0;      border-top: 50px solid transparent;      border-right: 100px solid red;      border-bottom: 50px solid transparent;  }</code></pre>    <h2><strong>Triangle Right(向右)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/25b99a2cb67dddfb3a08c00618da1b0c.png"></p>    <pre>  <code class="language-css">#triangle-right {      width: 0;      height: 0;      border-top: 50px solid transparent;      border-left: 100px solid red;      border-bottom: 50px solid transparent;  }</code></pre>    <h2><strong>Triangle Top Left(左上)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9fa3ed09eacb704611c922d9b2fc8a81.png"></p>    <pre>  <code class="language-css">#triangle-topleft {      width: 0;      height: 0;      border-top: 100px solid red;      border-right: 100px solid transparent;  }</code></pre>    <h2><strong>Triangle Top Right(右上)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/347c1bfb0286f0d3fc95e19781b1087f.png"></p>    <pre>  <code class="language-css">#triangle-topright {      width: 0;      height: 0;      border-top: 100px solid red;      border-left: 100px solid transparent;  }</code></pre>    <h2><strong>Triangle Bottom Left(左下)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0638b8a4e88da88fba39cd364cd6892d.png"></p>    <pre>  <code class="language-css">#triangle-bottomleft {      width: 0;      height: 0;      border-bottom: 100px solid red;      border-right: 100px solid transparent;  }</code></pre>    <h2><strong>Triangle Bottom Right(右下)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/42b395b13379f0c1099decb4644dbdff.png"></p>    <pre>  <code class="language-css">#triangle-bottomright {      width: 0;      height: 0;      border-bottom: 100px solid red;      border-left: 100px solid transparent;  }</code></pre>    <h2><strong>Curved Tail Arrow(弯尾箭头)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3c2fe7b69f253909f4ef6ebbab75a1fc.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1d3d231c179f2951ec687132a0c0175b.png"></p>    <pre>  <code class="language-css">#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);  }</code></pre>    <h2><strong>Trapezoid(梯形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e122ac917c652284380d6ff0be6765f3.png"></p>    <pre>  <code class="language-css">#trapezoid {      border-bottom: 100px solid red;      border-left: 50px solid transparent;      border-right: 50px solid transparent;      height: 0;      width: 100px;  }</code></pre>    <h2><strong>Parallelogram(平行四边形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3851071579ba9384a6cf90e2fe5cdb7b.png"></p>    <pre>  <code class="language-css">#parallelogram {      width: 150px;      height: 100px;      -webkit-transform: skew(20deg);         -moz-transform: skew(20deg);           -o-transform: skew(20deg);      background: red;  }</code></pre>    <h2><strong>Star (6-points)(六角星)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8ac8a1883c6a0c96c8584a72cf1adc5f.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Star (5-points)(五角星)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3cbf120499b147ebfec2c74da22a6c6e.png"></p>    <pre>  <code class="language-css">#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: '';  }</code></pre>    <h2><strong>Pentagon(五边形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/26fc4ce86bf611a8ba0614d6c5748838.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Hexagon(六边形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/324fb26e78273b4143946fc8aa8bba3b.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Octagon(八边形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c08ce9d51058b8db1d2265cb9f22a320.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Heart(心形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ff457307bb209bb9bcfb220e04fda81a.png"></p>    <pre>  <code class="language-css">#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%;  }</code></pre>    <h2><strong>Infinity(无限符图形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0300a51a80967bf38ac0241c8f662d9e.png"></p>    <pre>  <code class="language-css">#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);  }</code></pre>    <h2><strong>Diamond Square(菱形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/94f966dd92b037261dff12ef3a821b5d.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Diamond Shield（钻石盾牌）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c96a80b33ff9577f7adcc868cd66c18f.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Diamond Narrow</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fc0973502edfda3105cf5bcfdb8994c6.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Cut Diamond(砖石形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1a7a642c5acab75d6f81744d6e79d724.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Egg(鸡蛋)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f3e07611e0489c95a3d5fa1812b55c85.png"></p>    <pre>  <code class="language-css">#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%;  }</code></pre>    <h2><strong>Pac-Man(吃豆人)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5560f8b5fca1464a93497664699f2cee.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Talk Bubble（聊天框）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/05b24e6eb0a7f86113044c5c8afa72fe.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>12 Point Burst（爆炸形状）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a5585d2c4721509afea9d696fd083c45.png"></p>    <pre>  <code class="language-css">#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);  }</code></pre>    <h2><strong>Yin Yang(阴阳八卦)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/107d53ed7ec7c7b694c2d73519b405e3.png"></p>    <pre>  <code class="language-css">#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;  }</code></pre>    <h2><strong>Badge Ribbon(徽章丝带)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1b788849764fb251504afecbbdfdb19c.png"></p>    <pre>  <code class="language-css">#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);  }</code></pre>    <h2><strong>Space Invader（太空入侵者）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/44e6f5594d7fa5c052fd140d85337ff6.png"></p>    <pre>  <code class="language-css">#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;    }</code></pre>    <h2><strong>TV Screen（电视屏幕）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/55de3eb5e83dcdc6ec1366c05d29f788.png"></p>    <pre>  <code class="language-css">#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%;  }</code></pre>    <h2><strong>Chevron（雪佛龙）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b90bbd8757b43fc08f6ceeef2b2ac280.png"></p>    <pre>  <code class="language-css">#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);  }</code></pre>    <h2><strong>Magnifying Glass（放大镜）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/70ff13df99e8f7bb94803fa6f2ec2658.png"></p>    <pre>  <code class="language-css">#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);  }</code></pre>    <h2><strong>非死book Icon（非死book图标）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f7fc3e40e920a561e9c57da250b4fd0d.png"></p>    <pre>  <code class="language-css">#非死book-icon {    background: red;    text-indent: -999em;    width: 100px;    height: 110px;    border-radius: 5px;    position: relative;    overflow: hidden;    border: 15px solid red;    border-bottom: 0;  }  #非死book-icon::before {    content: "/20";    position: absolute;    background: red;    width: 40px;    height: 90px;    bottom: -30px;    right: -37px;    border: 20px solid #eee;    border-radius: 25px;  }  #非死book-icon::after {    content: "/20";    position: absolute;    width: 55px;    top: 50px;    height: 20px;    background: #eee;    right: 5px;  }</code></pre>    <h2><strong>Cone(圆锥形)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/32adddf15834c0756ff534055e8ec84c.png"></p>    <pre>  <code class="language-css">#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%;  }</code></pre>    <h2><strong>Moon(月亮)</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/81ab8967d3bbef5412cc6adcabeb717e.png"></p>    <pre>  <code class="language-css">#moon {    width: 80px;    height: 80px;    border-radius: 50%;    box-shadow: 15px 15px 0 0 red;  }</code></pre>    <h2><strong>Cross（十字架）</strong></h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8939f10a500c1ccd501e365f1b5c80d9.png"></p>    <pre>  <code class="language-css">#cross {    background: red;    height: 100px;    position: relative;    width: 20px;  }  #cross:after {    background: red;    content: "";    height: 20px;    left: -40px;    position: absolute;    top: 40px;    width: 100px;  }</code></pre>    <p>以上就是纯CSS绘制的各种图形，感受到CSS的强大了吧。</p>    <p> </p>    <p>来自：http://www.webhek.com/40-css-shapes</p>    <p> </p>