Skip to content

Instantly share code, notes, and snippets.

@codingdudecom

codingdudecom/css-star-5-pointed-star.markdown

Created October 6, 2021 13:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save codingdudecom/7f511b7e59054fd772741842e804f682 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save codingdudecom/7f511b7e59054fd772741842e804f682 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Star: 5 Pointed Star ★
Raw
css-star-5-pointed-star.markdown
Raw
index.html
<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>
Raw
style.css
.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