Skip to content

Instantly share code, notes, and snippets.

@codingdudecom
Created October 6, 2021 13:23
Show Gist options
  • Save codingdudecom/7f511b7e59054fd772741842e804f682 to your computer and use it in GitHub Desktop.
Save codingdudecom/7f511b7e59054fd772741842e804f682 to your computer and use it in GitHub Desktop.
CSS Star: 5 Pointed Star ★
<div class="five-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>
.five-pointed-star {
--star-color:orange;
margin:1em auto;
font-size:10em;
position: relative;
display: block;
width: 0px;
height: 0px;
border-right: 1em solid transparent;
border-bottom: 0.7em solid var(--star-color);
border-left: 1em solid transparent;
transform: rotate(35deg);
}
.five-pointed-star:before {
border-bottom: 0.8em solid var(--star-color);
border-left: 0.3em solid transparent;
border-right: 0.3em solid transparent;
position: absolute;
height: 0;
width: 0;
top: -0.45em;
left: -0.65em;
display: block;
content:"";
transform: rotate(-35deg);
}
.five-pointed-star:after {
position: absolute;
display: block;
top: 0.03em;
left: -1.05em;
width: 0;
height: 0;
border-right: 1em solid transparent;
border-bottom: 0.7em solid var(--star-color);
border-left: 1em solid transparent;
transform: rotate(-70deg);
content:"";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment