<div id="trap-one" class="color"></div>
<div id="trap-two" class="color"></div>
<div id="trap-three" class="color"></div>
<div id="trap-four" class="transparent"></div>
<div id="trap-five" class="transparent"></div>
<div id="trap-six" class="transparent"></div>

body {
  margin: 0;
  background: #3A1C71;
  background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
  background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

div {
  position: absolute;
}

.color {
  background: rgb(0,0,0);
}

.transparent {
  background-color: transparent;
}

#trap-one {
  height: 240px;
  width: 24px;
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 33%);
  transform: skewX(-30deg) translate(-320%,-10%);
}

#trap-two {
  height: 22px;
  width: 280px;
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 33%);
  transform: skewX(30deg) translate(-32%,595%);
}

#trap-three {
  height: 243px;
  width: 24px;
  background: linear-gradient(30deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.3) 33%);
  transform: skew(30deg) skewY(-40deg) translate(370%,35%);
}

#trap-four {
  width: 250px;
  height: 0;
  border-bottom: 24px solid rgba(0,0,0,0.5);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  
  transform: translate(-7%,450%);
}

#trap-five {
  width: 254px;
  height: 0;
  border-bottom: 24px solid rgba(0,0,0,0.5);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  transform: rotate(-120deg) translate(-22%,226%);
}

#trap-six {
  width: 250px;
  height: 0;
  border-bottom: 24px solid rgba(0,0,0,0.5);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  transform: rotate(120deg) translate(2%,186%);
}