CSS Starbursts

In this example below you will see how to do a CSS Starbursts with some HTML / CSS and Javascript

Left: 12 points and requires only 1 div. Right: 24 points but requires a nested span.

Thumbnail
This awesome code was written by peterhry, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright peterhry ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS Starbursts</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="starburst example" id="example-1">Hello</div>
<div class="starburst example" id="example-2"><span>Bam</span></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/peterhry/css-starbursts-jdrgp */
.starburst {
  font: 4em/1.4 'Lobster', georgia, serif;
  background: #202020;  
  width: 2.5em;
  height: 2.5em;
  text-align: center;
  color: #fff;
}

.starburst,
.starburst span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.starburst span {
  width: 100%;
  height: 100%;
  background: inherit;
  -webkit-transform: rotate(45deg);
          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;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

.starburst:after {
  -webkit-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

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

.example {
  position: absolute;
  top: 50%;  
  margin-top: -1.25em;
  margin-left: -1.25em;
}

#example-1 {
  left: 25%;
}

#example-2 {
  left: 75%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

Comments