How to styling shape HTML using CSS?




Example create CSS Triangle

code:



  #triangle {
      width: 0;
      height: 0;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-bottom: 140px solid blue;
      margin: 0 auto;
      }

result:


<div id="triangle"></div>




Example create CSS Star-Five

code:



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

result:







<div id="star-five"></div>












Example create CSS Octagon

code:



    #octagon {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
    }
    #octagon:before {
      content: "";
      width: 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: "";
      width: 100px;
      height: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 29px solid red;
      border-left: 29px solid #eee;
      border-right: 29px solid #eee;
    }  

result:




<div id="octagon"></div>









Example create CSS Heart

code:



    #heart {
     position: relative;
     width: 111px;
     height: 100px;
     margin: 0 auto;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      width: 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%;
    }

result:







<div id="heart"></div>









Example create CSS Ellipse

code:



    #heart {
     position: relative;
     width: 111px;
     height: 100px;
     margin: 0 auto;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      width: 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%;
    }

result: