Skip to content

Instantly share code, notes, and snippets.

@codingdudecom
Created October 7, 2021 12:40
Show Gist options
  • Save codingdudecom/ae6228ee26d89aa920f061de4f865a47 to your computer and use it in GitHub Desktop.
Save codingdudecom/ae6228ee26d89aa920f061de4f865a47 to your computer and use it in GitHub Desktop.
CSS Star: 6 Pointed Star ✶
<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>
.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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment