Pure CSS Things

I’ve had to add them to loads of web pages over the years, but I’m not sure what the proper name for them is. You know, the many-pointed stars / jagged edged circles used to denote special offers or prices. Them. Anyway, yesterday I had to add one to a page and decided to see if I could add it via pure CSS.

And for all browsers except IE8 and lower, I could.

.offer-flash {
  background-color: #DE277D;
  width: 50px;
  height: 50px;
  position: relative;
  transform: rotate(45deg);
}
.offer-flash:before, .offer-flash:after, .offer-flash b  {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #DE277D;
}
.offer-flash:before {
  transform: rotate(22.5deg);
  z-index: 4;
  content: "";
}
.offer-flash:after {
  transform: rotate(-22.5deg);
  z-index: 4;
  content: "";
}
.offer-flash  b {
  transform: rotate(-45deg);
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  text-transform: lowercase;
  z-index: 5;
}


<div class="offer-flash"><b>Wow!</b></div>

I’ve removed the various prefixed versions of transform for clarity, don’t forget to add them in if you want to support IE9, Firefox 15 or lower, Opera 12 or lower or any Webkit browser.

One caveat is that as the various elements and pseudo-elements overlap each other we can’t add borders or dropshadows to those elements. Borders I’m not going to get into, but dropshadows are possible by wrapping one extra HTML element. (Watch out for the interaction of z-index, position, :before and :after.)

.offer-flash-shadow {
  background-color: transparent;
  width: 50px;
  height: 50px;
  position: relative;
  box-shadow:  3px 3px 6px #333;
  z-index: 1;
}
.offer-flash-shadow:before, .offer-flash-shadow:after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: transparent;
  box-shadow:  3px 3px 6px #333;
  z-index: 2;
  }
.offer-flash-shadow:before {
  transform: rotate(-22.5deg);
  content: "";
}
.offer-flash-shadow:after {
  transform: rotate(22.5deg);
  content: "";
}
.offer-flash-shadow .offer-flash {
  box-shadow:  3px 3px 6px #333;
  position: absolute;
  z-index: 3;
}

<div class="offer-flash-shadow"><div class="offer-flash"><b>Wow!</b></div></div>