三角型

image.png

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

image.png

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

image.png

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

平行四边形

image.png

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

梯形

image.png

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

六角星

image.png

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

五角星

image.png

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

五边形

image.png

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

六边形

image.png

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

八边形

image.png

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

心

image.png

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

食人豆

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

12角星

image.png

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