CSS Star: 6 Pointed Star ✶

css-star-6-pointed-star.markdown

CSS Star: 6 Pointed Star ✶

CSS star shapes series on Coding-Dude.com

A Pen by Ion Emil Negoita on CodePen.

License.

index.html

<div class="six-pointed-star"></div>

<footer style="position:fixed;bottom:0;">read the full article: <a href="http://www.coding-dude.com/wp/css/css-star/">CSS Star</a></footer>

style.css

.six-pointed-star{
      --star-color:#0038b8;
      --sqrt-3:1.73205080757;
  margin: 0 auto;
      font-size:10em;
      width: 0;
      height: 0;
      position:relative;
      border-left: 1em solid transparent;
      border-right: 1em solid transparent;
      border-bottom: calc( 1em * var(--sqrt-3) ) solid var(--star-color);
}

.six-pointed-star:after{
      content:"";
      position:absolute;
      width: 0;
      height: 0;
      left:-1em;
      top:calc( 1em * var(--sqrt-3) / 3 );
      border-left: 1em solid transparent;
      border-right: 1em solid transparent;
      border-top: calc( 1em * var(--sqrt-3)  ) solid var(--star-color);
}