纯css画各种图形，包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等

梦里梦外; 2022-05-18 03:08 91阅读 0赞

今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是 firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的。

原文：[http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html][http_www.itivy.com_ivy_archive_2012_1_16_css-shape.html]

[1、正方形][1]

最终效果：

[![image][]][image 1]

CSS代码如下：

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

[2、长方形][2]

最终效果：

[![image][image 2]][image_image 2]

CSS代码如下：

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

[3、圆形][3]

最终效果：

[![image][image 3]][image_image 3]

CSS代码如下：

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

[4、椭圆][4]

最终效果：

[![image][image 4]][image_image 4]

CSS代码如下：

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

[5、上三角][5]

最终效果：

[![image][image 5]][image_image 5]

CSS代码如下：

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

[6、下三角][6]

最终效果：

[![image][image 6]][image_image 6]

CSS代码如下：

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

[7、左三角][7]

最终效果：

[![image][image 7]][image_image 7]

CSS代码如下：

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

[8、右三角][8]

最终效果：

[![image][image 8]][image_image 8]

CSS代码如下：

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

[9、左上三角][9]

最终效果：

[![image][image 9]][image_image 9]

CSS代码如下：

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

[10、右上三角][10]

最终效果：

[![image][image 10]][image_image 10]

CSS代码如下：

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

[11、左下三角][11]

最终效果：

[![image][image 11]][image_image 11]

CSS代码如下：

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

[12、右下三角][12]

最终效果：

[![image][image 12]][image_image 12]

CSS代码如下：

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

[13、平行四边形][13]

最终效果：

[![image][image 13]][image_image 13]

CSS代码如下：

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

[14、梯形][14]

最终效果：

[![image][image 14]][image_image 14]

CSS代码如下：

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

[15、六角星][15]

最终效果：

[![image][image 15]][image_image 15]

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

[16、五角星][16]

最终效果：

[![image][image 16]][image_image 16]

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: '';
    }

[17、五角大楼][17]

最终效果：

[![image][image 17]][image_image 17]

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

[18、六边形][18]

最终效果：

[![image][image 18]][image_image 18]

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

[19、八角形][19]

最终效果：

[![image][image 19]][image_image 19]

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 #eee;
        border-right: 29px solid #eee;
        width: 42px;
        height: 0;
    }
    
    #octagon:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;    
        border-top: 29px solid red;
        border-left: 29px solid #eee;
        border-right: 29px solid #eee;
        width: 42px;
        height: 0;
    }

[20、爱心][20]

最终效果：

[![image][image 20]][image_image 20]

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

[21、无穷大符号][21]

最终效果：

[![image][image 21]][image_image 21]

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

22、鸡蛋

最终效果

[![image][image 22]][image_image 22]

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

[23、食逗人（Pac-Man）][23_Pac-Man]

最终效果：

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

[24、提示对话框][24]

最终效果：

[![image][image 23]][image_image 23]

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

[25、12角星][25_12]

最终效果：

[![image][image 24]][image_image 24]

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

[26、8角星][26_8]

最终效果：

[![image][image 25]][image_image 25]

CSS代码如下：

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

[27、钻石][27]

最终效果：

[![image][image 26]][image_image 26]

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

[28、阴阳八卦（霸气的这个）][28]

[![image][image 27]][image_image 27]

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

好了，就到这里了，一共28个，个人觉得后面几个比较犀利。这些代码的来源是[css-tricks][]。由[青藤屋][Link 1]博客整理，转载请保留原文链接：  
  
[http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html][http_www.itivy.com_ivy_archive_2012_1_16_css-shape.html]

</div>
                </div>

[http_www.itivy.com_ivy_archive_2012_1_16_css-shape.html]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html
[1]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#square
[image]: /images/20220518/eccd6c3d5234411cae7e303053e840ab.png
[image 1]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833144233.png
[2]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#rectangle
[image 2]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083314820.png
[image_image 2]: /images/20220518/93f13943c51444a6be4cd039c60763ca.png
[3]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#circle
[image 3]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833152182.png
[image_image 3]: /images/20220518/6987f88c21904a02bd34c5062056f5c5.png
[4]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#oval
[image 4]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833153752.png
[image_image 4]: /images/20220518/4d72f779678c4bdab2da8198bb34446b.png
[5]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-up
[image 5]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083315131.png
[image_image 5]: /images/20220518/66442011c58146b8977e7c96e8642614.png
[6]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-down
[image 6]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833166510.png
[image_image 6]: /images/20220518/56ffc07e0ec04d87a195e79eaf148317.png
[7]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-left
[image 7]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833168113.png
[image_image 7]: /images/20220518/76dc9cb0ba45465c8291d50dccf38895.png
[8]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-right
[image 8]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833164492.png
[image_image 8]: /images/20220518/92ee1930458a450c9c5110ff02e81f34.png
[9]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-toplef
[image 9]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833174459.png
[image_image 9]: /images/20220518/921a58ed01744aa580647a3aff8f3d46.png
[10]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-topright
[image 10]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833174426.png
[image_image 10]: /images/20220518/d3248d14b49940d799a76484215e8651.png
[11]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-bottomleft
[image 11]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833176029.png
[image_image 11]: /images/20220518/74437f884aa64dfeb44931ce4e273b5e.png
[12]: http://www.itivy.com/http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#triangle-bottomright
[image 12]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833181852.png
[image_image 12]: /images/20220518/a27e9ec36b2745b1b0d7f535cf887809.png
[13]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#parallelogram
[image 13]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833184850.png
[image_image 13]: /images/20220518/13c316daf91647c8a2aba84a0e04e6e4.png
[14]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#trapezoid
[image 14]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833188405.png
[image_image 14]: /images/20220518/1368c958224c4a85aab9741d6fa738ee.png
[15]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#star-six
[image 15]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833198372.png
[image_image 15]: /images/20220518/87ee1936b90a4dddb1cb61e5ba0008ea.png
[16]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#star-five
[image 16]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083319815.png
[image_image 16]: /images/20220518/6c9451d8661f4772b863fb49ab13dfd0.png
[17]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#pentagon
[image 17]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083320782.png
[image_image 17]: /images/20220518/723346d6f9de4087836b5eb01ac0f808.png
[18]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#hexagon
[image 18]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833207161.png
[image_image 18]: /images/20220518/3d9098f370d047179cb9dc8bcbe50956.png
[19]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#octagon
[image 19]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083320716.png
[image_image 19]: /images/20220518/7fbba092e2444e199e8a33b516bde152.png
[20]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#heart
[image 20]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833216538.png
[image_image 20]: /images/20220518/1f83471d7f694f0f85cc00a09158f58f.png
[21]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#infinity
[image 21]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833214520.png
[image_image 21]: /images/20220518/9e8e890d96f34eeb8e44295bbc901dca.png
[image 22]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833227519.png
[image_image 22]: /images/20220518/9364152bfe6a4b3db8ca39c490ae2f64.png
[23_Pac-Man]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#pacman
[24]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#talkbubble
[image 23]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833226024.png
[image_image 23]: /images/20220518/722d44fadd644dc99e33e6143459c302.png
[25_12]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#burst-12
[image 24]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833233799.png
[image_image 24]: /images/20220518/221959d2f94547c593e35155b9575e33.png
[26_8]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#burst-8
[image 25]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/20120117083323385.png
[image_image 25]: /images/20220518/e7da59c4130247d08b5aa13caeb82744.png
[27]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#cut-diamond
[image 26]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833242304.png
[image_image 26]: /images/20220518/e983b2fd80c4460f9db74154023af1f5.png
[28]: http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html#yin-yang
[image 27]: http://images.cnblogs.com/cnblogs_com/sxwgf/201201/201201170833247255.png
[image_image 27]: /images/20220518/88e2dc7508e24cb8a9339f08a294ee9f.png
[css-tricks]: http://css-tricks.com/examples/ShapesOfCSS/
[Link 1]: http://www.itivy.com/ivy