CSS 'light beams'

using CSS produce the a CSS effect using clip-path & (in theory) shape-polygon() equivalent of beams of light... (turns out

by Matt Rummler

HTML

<div class='sunbeamcontainer'>
  <div class='ray centerbeam'>
  </div>
  
  <div class='ray leftbeam'>
  </div>
  <div class='ray rightbeam'>
  </div>
 
  <div class='ray lowerleftbeam'>
  </div>
  <div class='ray lowerrightbeam'>
  </div>
  <div class='ray bottomleftbeam'>
  </div>
  <div class='ray bottomrightbeam'>
  </div>

</div>

CSS

body
{
  height: 100%;
  width: 100%;
/*  background: linear-gradient(to top, rgba(0, 74, 145,.1), rgba(0, 74, 145,1));*/
}
.ray
{
  position: absolute;
  background-color: rgba(255, 220, 143, 0.4);
  height: 110%;/*2000px;*/
  width: 10%;
  -webkit-clip-path:polygon(45% 0, 55% 0, 75% 100%,25% 100%,45% 0);
  transform-origin: 50% 0;
  margin: 0 auto;
  margin-left: 45%;
}
/* .centerbeam
{
  /* don't actually need anything here*/
/*} */
.leftbeam
{
  transform: rotate(75deg);
}
.rightbeam
{
  transform: rotate(-75deg);
}
.lowerrightbeam
{
  transform: rotate(-45deg);
}
.lowerleftbeam
{
  transform: rotate(45deg);
}
.bottomrightbeam
{
  transform: rotate(-25deg);
}
.bottomleftbeam
{
  transform: rotate(25deg);
}