Skip to content

Instantly share code, notes, and snippets.

@codingdudecom

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

Created October 6, 2021 12:56
Show Gist options
  • Save codingdudecom/d4eed7aa9e24dc16a5154fa0498b7518 to your computer and use it in GitHub Desktop.
Save codingdudecom/d4eed7aa9e24dc16a5154fa0498b7518 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Star: 4 Pointed Star ✦
Raw
css-star-4-pointed-star.markdown
Raw
index.html
<div class="four-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
.four-pointed-star{
position:relative;
margin:1em auto;
width:1em;
font-size:12em;
}
.four-pointed-star:before{
content:"";
position:absolute;
background:red;
width:1em;
height:1.15em;
transform:rotate(-45deg) skewX(22.5deg) skewY(22.5deg);
}
.four-pointed-star:after{
content:"";
position:absolute;
background:red;
width:1em;
height:1.15em;
transform:rotate(45deg) skewX(22.5deg) skewY(22.5deg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment