因为面试的时候可能会出现这些东西，死记硬背不如知道原理

六角星

六角星的原理是两个三角形上下叠在一起，网上都用after选择器，但实际上，我觉得画两个div也行

  body{
    margin:0;
  }
      #star-six{
        width:0;
        height:0;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-bottom:100px solid red;
      }
      #star-six-2{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    top: 30px;
}

image.png

一定要用一个div的话

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

这里父元素用相对定位，after的定位才是与父元素对应的绝对定位

五角星

是三个三角形叠在一起，比起六角星，三角形之间的位置很复杂

  #star-five {
    border-left:70px solid red;
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
    position:absolute;
    margin-left:100px;
    -webkit-transform: rotate(18deg);
    -moz-transform:    rotate(18deg);
    -ms-transform:     rotate(18deg);
    -o-transform:      rotate(18deg);
//多边形内角和是(n-2)*360
  }
  #star-five-1 {
    border-left:70px solid red;
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
    position:absolute;
    margin-left:100px;
    -webkit-transform: rotate(-54deg);
    -moz-transform:    rotate(-54deg);
    -ms-transform:     rotate(-54deg);
    -o-transform:      rotate(-54deg);
  }
  #star-five-2
  {
    border-right:70px solid red;
    border-top:100px solid transparent;
    border-bottom:100px solid transparent;
    position:absolute;
    margin-left:95px;
//这里为什么是95我也没有想明白，但是100的话就会出现问题，一点点调95的时候正好
    -webkit-transform: rotate(54deg);
    -moz-transform:    rotate(54deg);
    -ms-transform:     rotate(54deg);
    -o-transform:      rotate(54deg);
  }

所以大致上所有的图形都可以靠拼出来

心形

是两个上面半圆下面矩形的形状拼接而成的，用左下角右下角作为旋转中心可以免去一些调整位置的麻烦

 #heart{
      width:50px;
      height:80px;
      border-radius:25px 25px 0 0;
      background-color:red;
      -o-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      -moz-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%;
         position:absolute;
         margin-left:50px;
    }
    #heart1{
      width:50px;
      height:80px;
      border-radius:25px 25px 0 0;
      background-color:red;
      -o-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform-origin: 100% 100%;
   -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
     -o-transform-origin: 100% 100%;
        position:absolute;
    }