triangle shadow thingy

by ian_smithz

HTML

<div class="triangle--1"></div>
<div class="triangle--2"></div>
<div class="triangle--3"></div>
<div class="triangle--4"></div>
<div class="triangle--5"></div>

CSS

body {
  margin: 0;
  padding: 0;
  z-index: 0;
  overflow-x: hidden;
}

.triangle, .triangle--1, .triangle--2, .triangle--3, .triangle--4, .triangle--5 {
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-style: solid;
  border-width: 600px 600px 0;
  content: "";
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  -webkit-filter: drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4));
  filter: drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4));
}

.triangle--1 {
  border-top-color: #0151a3;
  top: -60px;
  z-index: 2;
}

.triangle--2 {
  border-top-color: #025ebc;
  top: -120px;
  z-index: 3;
}

.triangle--3 {
  border-top-color: #026bd5;
  top: -180px;
  z-index: 4;
}

.triangle--4 {
  border-top-color: #0277ee;
  top: -240px;
  z-index: 5;
}

.triangle--5 {
  border-top-color: #0d84fd;
  top: -300px;
  z-index: 6;
}