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!

Top comments (1)

Collapse
 
mohamed_kerras profile image
Mokerras

my solution:

<div class="content">
  <div class="te t1 "></div>
  <div class="te t2 "></div>
  <div class="te t3 "></div>
  <div class="te t4 "></div>
</div>
<style>
  *{
    margin: 0; padding: 0;
    box-sizing: border-box;
  }
  body {
    background: #F2F2B6;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .content{
    width: 300px;
    height: 150px;
    background: transparent;
    position: relative;
    padding: 10px
    /* border-top: 140px solid #F3AC3C;
    transform: rotate(-90deg);
    border-left: 140px solid transparent; */
  }
  .te{
    width: 0;
    height: 0;
    position: absolute
  }
  .t1{
    margin-left: 20px;
    border-bottom: 130px solid #FD4602;
    transform: rotate(180deg);
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;

  }
  .t2{
    border-bottom: 130px solid #FF6D00;
    transform: rotate(180deg);
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;

  }
  .t3{
    margin-left: 130px;
    border-bottom: 130px solid #FF6D00;
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;

  }
  .t4{
    margin-left: 110px;
    border-bottom: 130px solid #FD4602;
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;

  }

</style>

Enter fullscreen mode Exit fullscreen mode