3D-perspectief

.driedee 
  {
    width: 100%;
    height: 300px;
    background-color: lightblue;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

.driedee1 {perspective: 300px; justify-content: center;}
.driedee2 {perspective: 700px;}
.driedee3 {perspective: 700px;}

.driedee div {background-color: rgba(255,0,255,0.5); transform-style: preserve-3d; height: 300px;}

.driedee1 div {transform: rotateX(33deg) rotateY(0deg); width: 100%;}
.driedee2 div:not(.schuin) {width: 60%; height: 250px;}
.driedee2 .schuin {width: 30%;}
.driedee2 div:first-child {transform: rotateX(0deg) rotateY(270deg);}
.driedee2 div:last-child {transform: rotateX(0deg) rotateY(90deg);}

echo "<div class='driedee driedee2'>";
echo "<div class='schuin'></div>";
echo "<div></div>";
echo "<div class='schuin'></div>";
echo "</div>";

echo "<div class='driedee driedee1'>";
echo "<div></div>";
echo "</div>";