div盒子形状

正方形

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

长方形

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

圆形

   #circle {
       100px;
      height: 100px;
      background: red;
      border-radius: 50%
    }

椭圆形

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

三角形

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

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

Left 三角形

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

Right

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

Top Left

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

Top Right

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

Bottom Left

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

Bottom Right

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

5角星

    #star-five {
      margin: 50px 0;
      position: relative;
      display: block;
      color: red;
       0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      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;
       0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    #star-five:after {
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
       0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
  

六角形

    #hexagon {
       100px;
      height: 55px;
      background: red;
      position: relative;
    }
    #hexagon:before {
      content: "";
      position: absolute;
      top: -25px;
      left: 0;
       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;
       0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 25px solid red;
    }
  

八角形

    #octagon {
       100px;
      height: 100px;
      background: red;
      position: relative;
    }
    #octagon:before {
      content: "";
       100px;
      height: 0;
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 29px solid red;
      border-left: 29px solid #eee;
      border-right: 29px solid #eee;
    }
    #octagon:after {
      content: "";
       100px;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 29px solid red;
      border-left: 29px solid #eee;
      border-right: 29px solid #eee;
    }
  

心型

    #heart {
      position: relative;
       100px;
      height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
       50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }