JSFiddle - React, Tailwind, and code Playground

by alexbfree

HTML

<div class="starburst"><span>From $93!</span></div>

CSS

.starburst {
  font-size: 4em;
  width: 2.5em;
  height: 2.5em;
  text-align: center;
  background-color: lightblue;
  position: absolute;
  top: 50px;
  left: 50px;
  transform: rotate(-45deg);
}

.starburst,
.starburst span {
  display: box;
  box-align: center;
  box-pack: center;
}

.starburst span {
  width: 100%;
  height: 100%;
  background: inherit;
  transform: rotate(45deg);
}

.starburst:before,
.starburst:after,
.starburst span:before,
.starburst span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
  transform: rotate(30deg);
}

.starburst:after,
.starburst span:before {
  transform: rotate(-30deg);
}