DEV Community

Cover image for CSSBattle | #14 Web Maker Logo
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

CSSBattle | #14 Web Maker Logo

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #14 Web Maker Logo challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.


Challenge:

Web Maker Logo Challenge


Solution:

<div class="container">
  <div class="triangle one"></div>
  <div class="triangle two"></div>
  <div class="triangle three"></div>
  <div class="triangle four"></div>
</div>
<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #F2F2B6;
    position: relative;
  }
  .triangle {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .one {
    border-top: 130px solid #FF6D00;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    transform: translate(calc(-50% + -65px), calc(-50% + 0px)) rotate(-360deg);
    z-index: 1;
  }
  .two {
    border-top: 130px solid #FD4602;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    transform: translate(calc(-50% + -45px), calc(-50% + 0px)) rotate(-360deg);
  }
  .three {
    border-top: 130px solid #FD4602;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    transform: translate(calc(-50% + 45px), calc(-50% + 0px)) rotate(-180deg);
    z-index: 1;
  }
  .four {
    border-top: 130px solid #FF6D00;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    transform: translate(calc(-50% + 65px), calc(-50% + 0px)) rotate(-180deg);
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Key Takeaway(s):

  • using z-index to overlap an element over another
  • adjust border properties to create a triangular shape

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

Discussion (0)