Triangle box with pulsative box shadow

In this example below you will see how to do a Triangle box with pulsative box shadow with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by marvinengelmann, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright marvinengelmann ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Triangle box with pulsative box shadow</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: dodgerblue;
}

.triangleBox {
  position: absolute;
  z-index: 0;
  top:50%;
  left:50%;
  margin-top:-150px;
  margin-left:-150px;
  border-top: 150px solid #CC0000;
  border-left: 150px solid #FFCC00;
  border-right: 150px solid #6600CC;
  border-bottom: 150px solid #000000;
  animation: magic 2s linear infinite;
  box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.8),
    0 0 0 10px rgba(0,0,0, 0.6),
    0 0 0 15px rgba(0,0,0, 0.4),
    0 0 0 20px rgba(0,0,0, 0.2),
    0 0 0 25px rgba(0,0,0, 0.05);
}

.triangleBox2 {
  position: absolute;
  z-index: 1;
  top:50%;
  left:50%;
  margin-top:-150px;
  margin-left:-150px;
  background: transparent;
  border-top: 150px solid #FFFF66;
  border-left: 150px solid #E86850;
  border-right: 150px solid #F1F0FF;
  border-bottom: 150px solid #C0C0C0;
  opacity: 0.5;
  animation: magic2 2s linear infinite;
} 

@keyframes magic {
  0% { /* middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
    box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.8),
    0 0 0 10px rgba(0,0,0, 0.6),
    0 0 0 15px rgba(0,0,0, 0.4),
    0 0 0 20px rgba(0,0,0, 0.2),
    0 0 0 25px rgba(0,0,0, 0.05);
  }
  25% { /* top left */
    border-top: 0 solid #CC0000;
    border-left: 0 solid #FFCC00;
    border-right: 300px solid #6600CC;
    border-bottom: 300px solid #000000;
    box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.05),
    0 0 0 10px rgba(0,0,0, 0.8),
    0 0 0 15px rgba(0,0,0, 0.6),
    0 0 0 20px rgba(0,0,0, 0.4),
    0 0 0 25px rgba(0,0,0, 0.2);
  }
  50% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
    box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.05),
    0 0 0 10px rgba(0,0,0, 0.8),
    0 0 0 15px rgba(0,0,0, 0.6),
    0 0 0 20px rgba(0,0,0, 0.4),
    0 0 0 25px rgba(0,0,0, 0.2);
  }
  75% { /* top right */
    border-top: 0px solid #CC0000;
    border-left: 300px solid #FFCC00;
    border-right: 0 solid #6600CC;
    border-bottom: 300px solid #000000;
  }
  100% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
}

@keyframes magic2 {
  0% { /* middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
  25% { /* bottom right */
    border-top: 300px solid #CC0000;
    border-left: 300px solid #FFCC00;
    border-right: 0 solid #6600CC;
    border-bottom: 0 solid #000000;
  }
  50% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
  75% { /* bottom left */
    border-top: 300px solid #CC0000;
    border-left: 0 solid #FFCC00;
    border-right: 300px solid #6600CC;
    border-bottom: 0 solid #000000;
  }
  100% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
}


    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="triangleBox"></div>
<div class="triangleBox2"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/marvinengelmann/triangle-box-with-pulsative-box-shadow-BgsIK */
body {
  background: dodgerblue;
}

.triangleBox {
  position: absolute;
  z-index: 0;
  top:50%;
  left:50%;
  margin-top:-150px;
  margin-left:-150px;
  border-top: 150px solid #CC0000;
  border-left: 150px solid #FFCC00;
  border-right: 150px solid #6600CC;
  border-bottom: 150px solid #000000;
  animation: magic 2s linear infinite;
  box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.8),
    0 0 0 10px rgba(0,0,0, 0.6),
    0 0 0 15px rgba(0,0,0, 0.4),
    0 0 0 20px rgba(0,0,0, 0.2),
    0 0 0 25px rgba(0,0,0, 0.05);
}

.triangleBox2 {
  position: absolute;
  z-index: 1;
  top:50%;
  left:50%;
  margin-top:-150px;
  margin-left:-150px;
  background: transparent;
  border-top: 150px solid #FFFF66;
  border-left: 150px solid #E86850;
  border-right: 150px solid #F1F0FF;
  border-bottom: 150px solid #C0C0C0;
  opacity: 0.5;
  animation: magic2 2s linear infinite;
} 

@keyframes magic {
  0% { /* middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
    box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.8),
    0 0 0 10px rgba(0,0,0, 0.6),
    0 0 0 15px rgba(0,0,0, 0.4),
    0 0 0 20px rgba(0,0,0, 0.2),
    0 0 0 25px rgba(0,0,0, 0.05);
  }
  25% { /* top left */
    border-top: 0 solid #CC0000;
    border-left: 0 solid #FFCC00;
    border-right: 300px solid #6600CC;
    border-bottom: 300px solid #000000;
    box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.05),
    0 0 0 10px rgba(0,0,0, 0.8),
    0 0 0 15px rgba(0,0,0, 0.6),
    0 0 0 20px rgba(0,0,0, 0.4),
    0 0 0 25px rgba(0,0,0, 0.2);
  }
  50% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
    box-shadow: 
    0 0 0 5px rgba(0,0,0, 0.05),
    0 0 0 10px rgba(0,0,0, 0.8),
    0 0 0 15px rgba(0,0,0, 0.6),
    0 0 0 20px rgba(0,0,0, 0.4),
    0 0 0 25px rgba(0,0,0, 0.2);
  }
  75% { /* top right */
    border-top: 0px solid #CC0000;
    border-left: 300px solid #FFCC00;
    border-right: 0 solid #6600CC;
    border-bottom: 300px solid #000000;
  }
  100% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
}

@keyframes magic2 {
  0% { /* middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
  25% { /* bottom right */
    border-top: 300px solid #CC0000;
    border-left: 300px solid #FFCC00;
    border-right: 0 solid #6600CC;
    border-bottom: 0 solid #000000;
  }
  50% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
  75% { /* bottom left */
    border-top: 300px solid #CC0000;
    border-left: 0 solid #FFCC00;
    border-right: 300px solid #6600CC;
    border-bottom: 0 solid #000000;
  }
  100% { /* Middle */
    border-top: 150px solid #CC0000;
    border-left: 150px solid #FFCC00;
    border-right: 150px solid #6600CC;
    border-bottom: 150px solid #000000;
  }
}


Comments