CSS3实现32种基本图形

谁践踏了优雅 2022-07-30 13:51 51阅读 0赞

**CSS3实现32种基本图形**

CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。  
网页代码中用到（** <div style="clear:both">**）和Div边距设置和浮动（**margin: 20px 20px; float: left;**）。

参考文章：编程之家：[http://blog.csdn.net/chenhongwu666/article/details/38905803][http_blog.csdn.net_chenhongwu666_article_details_38905803]

1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

效果图：

![SouthEast][]

#Circle{
         width:100px;
         height:100px;
         float: left;
         background: #6fee1d;
         -moz-border-radius: 50px;
         -webkit-border-radius: 50px;
         border-radius: 50px;
       }

2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。

效果图：

![SouthEast 1][]

#Oval {
         width: 200px;
         height: 100px;
         float: left;
         background: #e9880c;
         -webkit-border-radius: 100px / 50px;
         -moz-border-radius: 100px / 50px;
         border-radius: 100px / 50px;
       }

3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。

效果图：

![SouthEast 2][]

#Triangle {
         width: 0;
         height: 0;
         float: left;
         border-bottom: 100px solid #fcf706;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
       }

4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

效果图：

![SouthEast 3][]

#InvertedTriangle {
         width: 0;
         height: 0;
         float: left;
         border-top: 100px solid #30a3bf;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
       }

5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

效果图：

![SouthEast 4][]

#LeftTriangle {
         width: 0;
         height: 0;
         float: left;
         border-top: 50px solid transparent;
         border-right: 100px solid #466f20;
         border-bottom: 50px solid transparent;
       }

6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。

效果图：

![SouthEast 5][]

#RightTriangle {
         width: 0;
         height: 0;
         float: left;
         border-top: 50px solid transparent;
         border-left: 100px solid #800820;
         border-bottom: 50px solid transparent;
       }

7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

效果图：

![SouthEast 6][]

#Diamond {
        width: 100px;
        height: 100px;
        float: left;
        background: #8e00ff;
        /* Rotate */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        /* Rotate Origin */
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        margin: 40px 0 10px 240px;
       }

8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

效果图：

![SouthEast 7][]

#Trapezium {
        height: 0;
        width: 100px;
        float: left;
        border-bottom: 100px solid #dc2500;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
       }

9.长方形：宽比高长。

效果图：

![SouthEast 8][]

#Rectangle {
        height: 50px;
        width: 100px;
        float: left;
        background: #afe05d;
       }

10.正方形：宽和高相等。

效果图：

![SouthEast 9][]

#Square {
        height: 100px;
        width: 100px;
        float: left;
        background: #b02089;
       }

11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

效果图：

![SouthEast 10][]

#Ring {
        width: 100px;
        height: 100px;
        float: left;
        background-color: white;
        border-radius: 80px;
        border:5px #ffd700 solid;
       }

12.平行四边形：使用transform使长方形倾斜一个角度。

效果图：

![SouthEast 11][]

#Parallelogram {
        width: 120px;
        height: 80px;
        float: left;
        margin-left: 10px;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(230deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
        background-color: #2eda01;
       }

13.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。

效果图：

![SouthEast 12][]

#FiveStar {
         width: 0;
         height: 0;
         float: left;
         margin: 20px 20px;
         color: #ff0012;
         position: relative;
         display: block;
         border-right: 80px solid transparent;
         border-bottom: 60px solid #ff0012;
         border-left: 80px solid transparent;
         -moz-transform: rotate(35deg);
         -webkit-transform: rotate(35deg);
         -ms-transform: rotate(35deg);
         -o-transform: rotate(35deg);
       }
       #FiveStar:before {
         height: 0;
         width: 0;
         content: '';
         position: absolute;
         display: block;
         top: -35px;
         left: -50px;
         border-bottom: 60px solid #ff0012;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         -webkit-transform: rotate(-35deg);
         -moz-transform: rotate(-35deg);
         -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
       }
       #FiveStar:after {
         width: 0;
         height: 0;
         content: '';
         position: absolute;
         display: block;
         top: 3px;
         left: -85px;
         color: #ff0012;
         border-right: 80px solid transparent;
         border-bottom: 60px solid #ff0012;
         border-left: 80px solid transparent;
         -webkit-transform: rotate(-70deg);
         -moz-transform: rotate(-70deg);
         -ms-transform: rotate(-70deg);
         -o-transform: rotate(-70deg);
       }

14.六角星：使用transform属性来旋转不同的边。

效果图：

![SouthEast 13][]

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

15.六边形：在长方形上面和下面各放置一个三角形。

效果图：

![SouthEast 14][]

#Hexagon {
          width: 100px;
          height: 55px;
          float: left;
          background: #000001;
          position: relative;
          margin: 10px auto;
        }
        #Hexagon:before {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          top: -25px;
          left: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 25px solid #000001;
       }
       #Hexagon:after {
         content: "";
         width: 0;
         height: 0;
         position: absolute;
         bottom: -25px;
         left: 0;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-top: 25px solid #000001;
       }

16.五边形：可以采用三角形和梯形组合。

效果图：

![SouthEast 15][]

#Pentagon{
          width: 60px;
          float: left;
          position: relative;
          border-width: 52px 20px 0;
          border-style: solid;
          border-color: #711ee2 transparent;
        }
        #Pentagon:before{
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          top: -92px;
          left: -20px;
          border-width: 0 50px 40px;
          border-style: solid;
          border-color: transparent transparent #711ee2;
        }

17.八边形：在长方形上面和下面各放置一个梯形。

效果图：

![SouthEast 16][]

#Octagon{
        width: 100px;
        height: 100px;
        float: left;
        margin: 10px 10px;
        background-color: #66e006;
        position: relative;
       }
       #Octagon:before{
        width: 42px;
        height: 0;
        top: 0;
        left: 0;
        position: absolute;
        content: "";
        border-left: 29px solid #ffffff;
        border-right: 29px solid #ffffff;
        border-bottom: 29px solid #66e006;
       }
       #Octagon:after{
        width: 42px;
        height: 0;
        left: 0;
        bottom: 0;
        position: absolute;
        content: "";
        border-left: 29px solid #ffffff;
        border-right: 29px solid #ffffff;
        border-top: 29px solid #66e006;
       }

18.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。

效果图：

![SouthEast 17][]

#Heart {
        float: left;
        position: relative;
       }
       #Heart:before, #Heart:after {
        content: "";
        width: 70px;
        height: 115px;
        position: absolute;
        background: red;
        left: 70px;
        top: 0;
        -webkit-border-radius: 50px 50px 0 0;
        -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%;
       }

19.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。

效果图：

![SouthEast 18][]

#Egg {
        width: 100px;
        height: 160px;
        float: left;
        background: #ffb028;
        display: block;
        -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
       }

20.无穷符号：通过border属性和设置伪元素的角度来实现。

效果图：

![SouthEast 19][]

#Infinity {
        width: 220px;
        height: 100px;
        float: left;
        position: relative;
       }
       #Infinity:before, #Infinity:after {
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border: 20px solid #008bb0;
        -moz-border-radius: 50px 50px 0;
        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);
       }

21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

效果图：

![SouthEast 20][]

#CommentBubble {
         width: 140px;
         height: 100px;
         margin: 30px 20px;
         float: left;
         background: #8867b9;
         position: relative;
         -moz-border-radius: 12px;
         -webkit-border-radius: 12px;
         border-radius: 12px;
       }
       #CommentBubble:before {
         content: "";
         width: 0;
         height: 0;
         right: 100%;
         top: 38px;
         position: absolute;
         border-top: 13px solid transparent;
         border-right: 26px solid #8867b9;
         border-bottom: 13px solid transparent;
       }

22.钻石：上面一个梯形，下面一个三角形组成。

效果图：

![SouthEast 21][]

#Diamonds{
         width: 50px;
         height: 0;
         float: left;
         border-style: solid;
         border-color: transparent transparent #9aff02 transparent;
         border-width: 0 25px 25px 25px;
         position: relative;
         margin: 20px 0 50px 0;
       }
       #Diamonds:after{
         width: 0;
         height: 0;
         top: 25px;
         left: -25px;
         border-style: solid;
         border-color: #9aff02 transparent transparent transparent;
         border-width: 70px 50px 0 50px;
         position: absolute;
         content: "";
        }

23.八卦图：多个圆形的组合。

效果图：

![SouthEast 22][]

#EightDiagrams{
         width: 96px;
         height: 48px;
         margin: 20px 20px;
         float: left;
         background-color: #ffffff;
         border-color: #000000;
         border-style: solid;
         border-width: 2px 2px 50px 2px;
         border-radius: 100%;
         position: relative;
        }
        #EightDiagrams:before {
         width: 12px;
         height: 12px;
         top: 50%;
         left: 0;
         content: "";
         position: absolute;
         background-color: #ffffff;
         border: 18px solid #000000;
         border-radius: 100%;
        }
        #EightDiagrams:after {
         width: 12px;
         height: 12px;
         top: 50%;
         left: 50%;
         background-color: #000000;
         border: 18px solid #ffffff;
         border-radius:100%;
         content: "";
         position: absolute;
        }

24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。

效果图：

![SouthEast 23][]

#PacMan {
         width: 0;
         height: 0;
         float: left;
         border-right: 60px solid transparent;
         border-left: 60px solid #300fed;
         border-top: 60px solid #300fed;
         border-bottom: 60px solid #300fed;
         border-top-left-radius: 60px;
         border-top-right-radius: 60px;
         border-bottom-left-radius: 60px;
         border-bottom-right-radius: 60px;
        }

25.扇形：在三角形的基础上，让其中一边成弧形 。

效果图：

![SouthEast 24][]

#Sector {
          width:0;
          height:0;
          float: left;
          background-color: #ffffff;
          border-left: 70px solid transparent;
          border-right: 70px solid transparent;
          border-top: 100px solid #ab9ed1;
          border-radius:50%;
        }

26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

效果图：

![SouthEast 25][]

#CrescentMoon{
          width:80px;
          height:80px;
          float: left;
          background-color: #ffffff;
          border-radius:50%;
          box-shadow: 15px 15px 0 0 #9600d2;
        }

27.顶左直角三角形。

效果图：

![SouthEast 26][]

#TopLeftTriangle {
          width: 0px;
          height: 0px;
          margin: 10px 10px;
          float: left;
          border-top: 100px solid #7efde1;
          border-right: 100px solid transparent;
        }

28.顶右直角三角形。

效果图：

![SouthEast 27][]

#TopRightTriangle {
          width: 0px;
          height: 0px;
          margin: 10px 10px;
          float: left;
          border-top: 100px solid #400526;
          border-left: 100px solid transparent;
        }

29.底左直角三角形。

效果图：

![SouthEast 28][]

#BottomLeftTriangle {
         width: 0px;
         height: 0px;
         margin: 10px 10px;
         float: left;
         border-bottom: 100px solid #600ffe;
         border-right: 100px solid transparent;
        }

30.底右直角三角形。

效果图：

![SouthEast 29][]

#BottomRightTriangle {
         width: 0px;
         height: 0px;
         margin: 10px 10px;
         float: left;
         border-bottom: 100px solid #ff7578;
         border-left: 100px solid transparent;
        }

31.八角形。

效果图：

![SouthEast 30][]

#Burst8 {
         width: 80px;
         height: 80px;
         margin: 10px 10px;
         float: left;
         background-color: #cf7668;
         position: relative;
         transform:rotate(20deg);
         -webkit-transform:rotate(20deg);
         -ms-transform:rotate(20deg);
         -moz-transform:rotate(20deg);
         -o-transform:rotate(20deg);
        }
        #Burst8:before{
         width: 80px;
         height: 80px;
         top: 0;
         left: 0;
         background-color: #cf7668;
         position: absolute;
         content: "";
         transform:rotate(135deg);
         -webkit-transform:rotate(135deg);
         -ms-transform:rotate(135deg);
         -moz-transform:rotate(135deg);
         -o-transform:rotate(135deg);
        }

32.十二角形。

效果图：

![SouthEast 31][]

#Burst12 {
          width: 80px;
          height: 80px;
          margin: 20px 20px;
          float: left;
          background-color: #a8ff26;
          position: relative;
          text-align: center;
        }
        #Burst12:before, #Burst12:after{
          width: 80px;
          height: 80px;
          top: 0;
          left: 0;
          background-color: #a8ff26;
          position: absolute;
          content: "";
        }
        #Burst12:before{
          transform:rotate(30deg);
          -webkit-transform:rotate(30deg);
          -ms-transform:rotate(30deg);
          -moz-transform:rotate(30deg);
          -o-transform:rotate(30deg);
        }
        #Burst12:after{
          transform:rotate(60deg);
          -webkit-transform:rotate(60deg);
          -ms-transform:rotate(60deg);
          -moz-transform:rotate(60deg);
          -o-transform:rotate(60deg);
        }

完整的CSS3+HTML5代码：BaseGraphCSS3.html

效果图：

![SouthEast 32][]

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>CSS3实现基本图形</title>
      <style>
       #Circle{
         width:100px;
         height:100px;
         float: left;
         background: #6fee1d;
         -moz-border-radius: 50px;
         -webkit-border-radius: 50px;
         border-radius: 50px;
       }
       #Oval {
         width: 200px;
         height: 100px;
         float: left;
         background: #e9880c;
         -webkit-border-radius: 100px / 50px;
         -moz-border-radius: 100px / 50px;
         border-radius: 100px / 50px;
       }
       #Triangle {
         width: 0;
         height: 0;
         float: left;
         border-bottom: 100px solid #fcf706;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
       }
       #InvertedTriangle {
         width: 0;
         height: 0;
         float: left;
         border-top: 100px solid #30a3bf;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
       }
       #LeftTriangle {
         width: 0;
         height: 0;
         float: left;
         border-top: 50px solid transparent;
         border-right: 100px solid #466f20;
         border-bottom: 50px solid transparent;
       }
       #RightTriangle {
         width: 0;
         height: 0;
         float: left;
         border-top: 50px solid transparent;
         border-left: 100px solid #800820;
         border-bottom: 50px solid transparent;
       }
       #Diamond {
        width: 100px;
        height: 100px;
        float: left;
        background: #8e00ff;
        /* Rotate */
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        /* Rotate Origin */
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
        margin: 40px 0 10px 240px;
       }
       #Trapezium {
        height: 0;
        width: 100px;
        float: left;
        border-bottom: 100px solid #dc2500;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
       }
       #Rectangle {
        height: 50px;
        width: 100px;
        float: left;
        background: #afe05d;
       }
       #Square {
        height: 100px;
        width: 100px;
        float: left;
        background: #b02089;
       }
       #Ring {
        width: 100px;
        height: 100px;
        float: left;
        background-color: white;
        border-radius: 80px;
        border:5px #ffd700 solid;
       }
       #Parallelogram {
        width: 120px;
        height: 80px;
        float: left;
        margin-left: 10px;
        -webkit-transform: skew(30deg);
        -moz-transform: skew(230deg);
        -o-transform: skew(30deg);
        transform: skew(30deg);
        background-color: #2eda01;
       }
    
       #FiveStar {
         width: 0;
         height: 0;
         float: left;
         margin: 20px 20px;
         color: #ff0012;
         position: relative;
         display: block;
         border-right: 80px solid transparent;
         border-bottom: 60px solid #ff0012;
         border-left: 80px solid transparent;
         -moz-transform: rotate(35deg);
         -webkit-transform: rotate(35deg);
         -ms-transform: rotate(35deg);
         -o-transform: rotate(35deg);
       }
       #FiveStar:before {
         height: 0;
         width: 0;
         content: '';
         position: absolute;
         display: block;
         top: -35px;
         left: -50px;
         border-bottom: 60px solid #ff0012;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         -webkit-transform: rotate(-35deg);
         -moz-transform: rotate(-35deg);
         -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
       }
       #FiveStar:after {
         width: 0;
         height: 0;
         content: '';
         position: absolute;
         display: block;
         top: 3px;
         left: -85px;
         color: #ff0012;
         border-right: 80px solid transparent;
         border-bottom: 60px solid #ff0012;
         border-left: 80px solid transparent;
         -webkit-transform: rotate(-70deg);
         -moz-transform: rotate(-70deg);
         -ms-transform: rotate(-70deg);
         -o-transform: rotate(-70deg);
       }
    
       #SixStar{
         width: 0;
         height: 0;
         float: left;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 100px solid #cfd810;
         position: relative;
        }
        #SixStar:after{
         width: 0;
         height: 0;
         content: "";
         border-top: 100px solid #cfd810;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         position: absolute;
         top: 30px;
         left: -50px;
        }
    
        #Pentagon{
          width: 60px;
          float: left;
          position: relative;
          border-width: 52px 20px 0;
          border-style: solid;
          border-color: #711ee2 transparent;
        }
        #Pentagon:before{
          content: "";
          position: absolute;
          width: 0;
          height: 0;
          top: -92px;
          left: -20px;
          border-width: 0 50px 40px;
          border-style: solid;
          border-color: transparent transparent #711ee2;
        }
    
        #Hexagon {
          width: 100px;
          height: 55px;
          float: left;
          background: #000001;
          position: relative;
          margin: 10px auto;
        }
        #Hexagon:before {
          content: "";
          width: 0;
          height: 0;
          position: absolute;
          top: -25px;
          left: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 25px solid #000001;
       }
       #Hexagon:after {
         content: "";
         width: 0;
         height: 0;
         position: absolute;
         bottom: -25px;
         left: 0;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-top: 25px solid #000001;
       }
    
       #Octagon{
        width: 100px;
        height: 100px;
        float: left;
        margin: 10px 10px;
        background-color: #66e006;
        position: relative;
       }
       #Octagon:before{
        width: 42px;
        height: 0;
        top: 0;
        left: 0;
        position: absolute;
        content: "";
        border-left: 29px solid #ffffff;
        border-right: 29px solid #ffffff;
        border-bottom: 29px solid #66e006;
       }
       #Octagon:after{
        width: 42px;
        height: 0;
        left: 0;
        bottom: 0;
        position: absolute;
        content: "";
        border-left: 29px solid #ffffff;
        border-right: 29px solid #ffffff;
        border-top: 29px solid #66e006;
       }
    
       #Heart {
        float: left;
        position: relative;
       }
       #Heart:before, #Heart:after {
        content: "";
        width: 70px;
        height: 115px;
        position: absolute;
        background: red;
        left: 70px;
        top: 0;
        -webkit-border-radius: 50px 50px 0 0;
        -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%;
       }
    
       #Egg {
        width: 100px;
        height: 160px;
        float: left;
        background: #ffb028;
        display: block;
        -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
       }
    
       #Infinity {
        width: 220px;
        height: 100px;
        float: left;
        position: relative;
       }
       #Infinity:before, #Infinity:after {
        content: "";
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border: 20px solid #008bb0;
        -moz-border-radius: 50px 50px 0;
        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);
       }
    
       #CommentBubble {
         width: 140px;
         height: 100px;
         margin: 30px 20px;
         float: left;
         background: #8867b9;
         position: relative;
         -moz-border-radius: 12px;
         -webkit-border-radius: 12px;
         border-radius: 12px;
       }
       #CommentBubble:before {
         content: "";
         width: 0;
         height: 0;
         right: 100%;
         top: 38px;
         position: absolute;
         border-top: 13px solid transparent;
         border-right: 26px solid #8867b9;
         border-bottom: 13px solid transparent;
       }
    
       #Diamonds{
         width: 50px;
         height: 0;
         float: left;
         border-style: solid;
         border-color: transparent transparent #9aff02 transparent;
         border-width: 0 25px 25px 25px;
         position: relative;
         margin: 20px 0 50px 0;
       }
       #Diamonds:after{
         width: 0;
         height: 0;
         top: 25px;
         left: -25px;
         border-style: solid;
         border-color: #9aff02 transparent transparent transparent;
         border-width: 70px 50px 0 50px;
         position: absolute;
         content: "";
        }
    
        #EightDiagrams{
         width: 96px;
         height: 48px;
         margin: 20px 20px;
         float: left;
         background-color: #ffffff;
         border-color: #000000;
         border-style: solid;
         border-width: 2px 2px 50px 2px;
         border-radius: 100%;
         position: relative;
        }
        #EightDiagrams:before {
         width: 12px;
         height: 12px;
         top: 50%;
         left: 0;
         content: "";
         position: absolute;
         background-color: #ffffff;
         border: 18px solid #000000;
         border-radius: 100%;
        }
        #EightDiagrams:after {
         width: 12px;
         height: 12px;
         top: 50%;
         left: 50%;
         background-color: #000000;
         border: 18px solid #ffffff;
         border-radius:100%;
         content: "";
         position: absolute;
        }
    
        #PacMan {
         width: 0;
         height: 0;
         float: left;
         border-right: 60px solid transparent;
         border-left: 60px solid #300fed;
         border-top: 60px solid #300fed;
         border-bottom: 60px solid #300fed;
         border-top-left-radius: 60px;
         border-top-right-radius: 60px;
         border-bottom-left-radius: 60px;
         border-bottom-right-radius: 60px;
        }
    
        #Sector {
          width:0;
          height:0;
          float: left;
          background-color: #ffffff;
          border-left: 70px solid transparent;
          border-right: 70px solid transparent;
          border-top: 100px solid #ab9ed1;
          border-radius:50%;
        }
    
        #CrescentMoon{
          width:80px;
          height:80px;
          float: left;
          background-color: #ffffff;
          border-radius:50%;
          box-shadow: 15px 15px 0 0 #9600d2;
        }
    
        #TopLeftTriangle {
          width: 0px;
          height: 0px;
          margin: 10px 10px;
          float: left;
          border-top: 100px solid #7efde1;
          border-right: 100px solid transparent;
        }
        #TopRightTriangle {
          width: 0px;
          height: 0px;
          margin: 10px 10px;
          float: left;
          border-top: 100px solid #400526;
          border-left: 100px solid transparent;
        }
        #BottomLeftTriangle {
         width: 0px;
         height: 0px;
         margin: 10px 10px;
         float: left;
         border-bottom: 100px solid #600ffe;
         border-right: 100px solid transparent;
        }
        #BottomRightTriangle {
         width: 0px;
         height: 0px;
         margin: 10px 10px;
         float: left;
         border-bottom: 100px solid #ff7578;
         border-left: 100px solid transparent;
        }
    
        #Burst8 {
         width: 80px;
         height: 80px;
         margin: 10px 10px;
         float: left;
         background-color: #cf7668;
         position: relative;
         transform:rotate(20deg);
         -webkit-transform:rotate(20deg);
         -ms-transform:rotate(20deg);
         -moz-transform:rotate(20deg);
         -o-transform:rotate(20deg);
        }
        #Burst8:before{
         width: 80px;
         height: 80px;
         top: 0;
         left: 0;
         background-color: #cf7668;
         position: absolute;
         content: "";
         transform:rotate(135deg);
         -webkit-transform:rotate(135deg);
         -ms-transform:rotate(135deg);
         -moz-transform:rotate(135deg);
         -o-transform:rotate(135deg);
        }
    
        #Burst12 {
          width: 80px;
          height: 80px;
          margin: 20px 20px;
          float: left;
          background-color: #a8ff26;
          position: relative;
          text-align: center;
        }
        #Burst12:before, #Burst12:after{
          width: 80px;
          height: 80px;
          top: 0;
          left: 0;
          background-color: #a8ff26;
          position: absolute;
          content: "";
        }
        #Burst12:before{
          transform:rotate(30deg);
          -webkit-transform:rotate(30deg);
          -ms-transform:rotate(30deg);
          -moz-transform:rotate(30deg);
          -o-transform:rotate(30deg);
        }
        #Burst12:after{
          transform:rotate(60deg);
          -webkit-transform:rotate(60deg);
          -ms-transform:rotate(60deg);
          -moz-transform:rotate(60deg);
          -o-transform:rotate(60deg);
        }
      </style>
    </head>
    <body>
      
      <div id="Circle"></div>
      
      <div id="Oval"></div>
      
      <div id="Triangle"></div>
      
      <div id="InvertedTriangle"></div>
      
      <div id="LeftTriangle"></div>
      
      <div id="RightTriangle"></div>
      
      <div id="Diamond"></div>
      
      <div id="Trapezium"></div>
      
      <div id="Rectangle"></div>
    
      
      <div style="clear:both">
      
      <div id="Square"></div>
      
      <div id="Ring"></div>
      
      <div id="Parallelogram"></div>
      
      <div id="FiveStar"></div>
      
      <div id="SixStar"></div>
      
      <div id="Pentagon"></div>
      
      <div id="Hexagon"></div>
      
      <div id="Octagon"></div>
      
      <div id="Heart"></div>
    
      
      <div style="clear:both">
      
      <div id="Egg"></div>
      
      <div id="Infinity"></div>
      
      <div id="CommentBubble"></div>
      
      <div id="Diamonds"></div>
      
      <div id="EightDiagrams"></div>
      
      <div id="PacMan"></div>
      
      <div id="Sector"></div>
      
      <div id="CrescentMoon"></div>
    
      
      <div style="clear:both">
      
      <div id="TopLeftTriangle"></div>
      
      <div id="TopRightTriangle"></div>
      
      <div id="BottomLeftTriangle"></div>
      
      <div id="BottomRightTriangle"></div>
      
      <div id="Burst8"></div>
      
      <div id="Burst12"></div>
    </body>
    </html>

多角形绘制比较复杂，比如五角星，八角形等。

心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。

以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。

最近又搜罗到一些纯CSS3生成的小图标，基本上是一些仿手机App类的小图标。因为定位上用到绝对定位较多，感觉处理起来略麻烦。

以下是效果图：

![SouthEast 33][]

使用CSS3制作72个webapp图标：[http://www.cnblogs.com/jr1993/p/4671561.html][http_www.cnblogs.com_jr1993_p_4671561.html]

源代码在此处：[https://github.com/JR93/css3-icon][https_github.com_JR93_css3-icon]

[http_blog.csdn.net_chenhongwu666_article_details_38905803]: http://blog.csdn.net/chenhongwu666/article/details/38905803
[SouthEast]: /images/20220724/1b9b9449560d46b3bbcf5ed373bb3145.png
[SouthEast 1]: /images/20220724/6a0d2f7dc7bd42a299637203141a6694.png
[SouthEast 2]: /images/20220724/0c1cb96d0d8c41aebcd21b657718bac5.png
[SouthEast 3]: /images/20220724/84f0055af9c8497dbf89e5786f450cfb.png
[SouthEast 4]: /images/20220724/37324cac29604d8d8f773d5f4c3ff760.png
[SouthEast 5]: /images/20220724/0a478a0789c14a00999116ffb95329f9.png
[SouthEast 6]: /images/20220724/6ca3fe39c8224074ac603e80b13f38a5.png
[SouthEast 7]: /images/20220724/1c124426984a49d6bec6981895183c01.png
[SouthEast 8]: /images/20220724/944acc3709194612b7336fb69c060c2a.png
[SouthEast 9]: /images/20220724/20110f029bed4e72be7bddf66a91f1f4.png
[SouthEast 10]: /images/20220724/28ee023400714bebb838c458d88040ea.png
[SouthEast 11]: /images/20220724/efaa023668c044aeabaf233ffb1cdf21.png
[SouthEast 12]: /images/20220724/2ca709745a1445d0a4633d0ad31f0e20.png
[SouthEast 13]: /images/20220724/64fbe91dfbe7490c95842f75d9da84cd.png
[SouthEast 14]: /images/20220724/48a0a20cd3b34a3caae5c112bb06d423.png
[SouthEast 15]: /images/20220724/f1d9c74a8460400798fec1c195d8e0bb.png
[SouthEast 16]: /images/20220724/3ac12cf03c264fb0baa412f782a07595.png
[SouthEast 17]: /images/20220724/e281de0892594f72b91488a1df74c8bd.png
[SouthEast 18]: /images/20220724/d6d809872a0440f696de05e3b9e5a5e7.png
[SouthEast 19]: /images/20220724/2578d48083af45b29b052f3d8258e81e.png
[SouthEast 20]: /images/20220724/2831525c6d1a4918b8cd817464692e57.png
[SouthEast 21]: /images/20220724/5c5a923e406343bf87a10f6fcf1a870e.png
[SouthEast 22]: /images/20220724/b7bba2f000204f22b93bdd8ad52e2870.png
[SouthEast 23]: /images/20220724/cef3e66b54734ca391620c7f92fc16e2.png
[SouthEast 24]: /images/20220724/58960cdcb452440eb33eeceddf97d8d3.png
[SouthEast 25]: /images/20220724/7ed48103adb14957bb5385c8aa3b8f17.png
[SouthEast 26]: /images/20220724/57298bd49c404555ae2200ec9a820ec3.png
[SouthEast 27]: /images/20220724/b773df165b6b40dc95b6f70b54565734.png
[SouthEast 28]: /images/20220724/f950ccacc119481db705a45592872c5a.png
[SouthEast 29]: /images/20220724/ab7c82d7c0fd4dabb5539847210e9b28.png
[SouthEast 30]: /images/20220724/19c7ad31998246fbb197dda1f183058c.png
[SouthEast 31]: /images/20220724/688b7aa9897f4d0a86b02988bfd46eeb.png
[SouthEast 32]: /images/20220724/f719ae6f2ab24b198e419000d68a38b5.png
[SouthEast 33]: /images/20220724/33dd03ff766242a49b286f0e2a9735af.png
[http_www.cnblogs.com_jr1993_p_4671561.html]: http://www.cnblogs.com/jr1993/p/4671561.html
[https_github.com_JR93_css3-icon]: https://github.com/JR93/css3-icon