CSS3实现32种基本图型

在csdn上看到的，感觉还不错，不规则图形有时候需要用得到

1.圆形

css

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

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

2.椭圆

css

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

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

3.正三角形

css

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

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

4.倒三角形

css

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

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

5.左三角形

css

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

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

6.右三角型

css

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

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

7.菱形

css

#Diamond {
    width: 100px;
    height: 100px;
    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;
   }

#Diamond {
    width: 100px;
    height: 100px;
    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.梯形

css

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

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

9.圆环

css

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

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

10.平行四边形

css

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

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

11.五角星

css

#FiveStar {
     width: 0;
     height: 0;
     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);
   }

#FiveStar {
     width: 0;
     height: 0;
     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);
   }

12.六角星

css

#SixStar{
     width: 0;
     height: 0;
     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;
    }

#SixStar{
     width: 0;
     height: 0;
     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;
    }

13.六边形

css

#Hexagon {
      width: 100px;
      height: 55px;
      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;
   }

#Hexagon {
      width: 100px;
      height: 55px;
      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;
   }

14.五边形

css

#Pentagon{
      width: 60px;
      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;
    }

#Pentagon{
      width: 60px;
      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;
    }

15.八边形

css

#Octagon{
    width: 100px;
    height: 100px;
    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;
   }

#Octagon{
    width: 100px;
    height: 100px;
    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;
   }

16.心形

css

#Heart {
    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%;
   }

#Heart {
    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%;
   }

17.蛋形

css

#Egg {
    width: 100px;
    height: 160px;
    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%;
   }

#Egg {
    width: 100px;
    height: 160px;
    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%;
   }

18.无穷符号

css

#Infinity {
    width: 220px;
    height: 100px;
    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);
   }

#Infinity {
    width: 220px;
    height: 100px;
    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);
   }

19.消息提示框

css

#CommentBubble {
     width: 140px;
     height: 100px;
     margin: 30px 20px;
     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;
   }

#CommentBubble {
     width: 140px;
     height: 100px;
     margin: 30px 20px;
     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;
   }

20.钻石

css

#Diamonds{
     width: 50px;
     height: 0;
     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: "";
    }

#Diamonds{
     width: 50px;
     height: 0;
     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: "";
    }

21.八卦图

css

#EightDiagrams{
     width: 96px;
     height: 48px;
     margin: 20px 20px;
     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;
    }

#EightDiagrams{
     width: 96px;
     height: 48px;
     margin: 20px 20px;
     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;
    }

22.食豆人

css

#PacMan {
     width: 0;
     height: 0;
     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;
    }

#PacMan {
     width: 0;
     height: 0;
     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;
    }

23.扇形

css

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

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

24.月牙

css

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

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

25.顶左直角三角形

css

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

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

26.顶右直角三角形

css

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

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

27.底左直角三角形

css

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

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

28.底右直角三角形

css

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

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

29.八角形

css

#Burst8 {
     width: 80px;
     height: 80px;
     margin: 10px 10px;
     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);
    }

#Burst8 {
     width: 80px;
     height: 80px;
     margin: 10px 10px;
     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);
    }

30.十二角形

css

#Burst12 {
      width: 80px;
      height: 80px;
      margin: 20px 20px;
      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);
    }

#Burst12 {
      width: 80px;
      height: 80px;
      margin: 20px 20px;
      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实现32种基本图型 ​

CSS3实现32种基本图型