Web Maker Logo

<div class="triangle-up front"></div>
<div class="triangle-up back"></div>
<div class="triangle-down front"></div>
<div class="triangle-down back"></div>

<style>
  body {
    background: #f2f2b6;
    display: grid;
    place-items: center;
    height: 100vh;
    margin: 0;
  }

  div {
    position: absolute;
    width: 150px;
    height: 130px;
  }

  .triangle-up.front {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #ff6d00;
    left: 60px;
  }

  .triangle-up.back {
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #fd4602;
    left: 80px;
    z-index: -1;
  }

  .triangle-down.front {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #fd4602;
    left: 170px;
  }

  .triangle-down.back {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #ff6d00;
    left: 190px;
    z-index: -1;
  }
</style>