CSS Star: 4 Pointed Star ✦

css-star-4-pointed-star.markdown

CSS Star: 4 Pointed Star ✦

CSS star shapes series on Coding-Dude.com

A Pen by Ion Emil Negoita on CodePen.

License.

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>

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);
}