title: The Shapes of CSS - the star. How it works?
body: <p><a href="https://i.stack.imgur.com/0BgQr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0BgQr.png" alt="enter image description here"></a></p>
  
  <p>Below is the code of <a href="https://css-tricks.com/examples/ShapesOfCSS/" rel="nofollow noreferrer">The Shapes of CSS</a>. I want to understand the CSS properties in detail here. How does the shape in CSS work? The pseudo CSS, the borders and the CSS3 properties. Need to clear some concept regarding core CSS properties.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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: '';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="star-five"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>