Question 44435 in Html Question posted in
Some basic documentation can be found here.

Create a fullwidth web page that split into 4 triangles – Html

I’m using HTML and CSS and trying to split a webpage into 4 triangles that join in the middle of the screen.

So far there is the best result I got.

My Codepen

body {
    margin: 0;
    padding: 0;
  }
  
  .container {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
  
  .triangle {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 1;
  }
  
  .top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-bottom: 100vh solid #FF5733;
  }
  
  .left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-top: 50vh solid transparent;
    border-bottom: 50vh solid transparent;
    border-right: 100vw solid #C70039;
  }
  
  .bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-top: 100vh solid #581845;
  }
  
  .right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border-top: 50vh solid transparent;
    border-bottom: 50vh solid transparent;
    border-left: 100vw solid #900C3F;
  }
  
  @media (max-width: 767px) {
    .triangle {
      width: 100vw;
      height: 0;
    }
    
    .top, .left, .bottom, .right {
      border-style: solid;
      border-width: 0;
    }
    
    .top {
      border-color: #FF5733 transparent transparent transparent;
      border-bottom-width: 50vh;
      transform: none;
    }
    
    .left {
      border-color: transparent #C70039 transparent transparent;
      border-right-width: 50vw;
      transform: none;
    }
    
    .bottom {
      border-color: transparent transparent #581845 transparent;
      border-top-width: 50vh;
      transform: none;
    }
    
    .right {
      border-color: transparent transparent transparent #900C3F;
      border-left-width: 50vw;
      transform: none;
    }
  }

Every time i try to get those half width everything got messed up.

The idea is the display 4 triangle that join in the middle

How can i achieve such resluts ?

Thank you very much

Tags:

2

Answers


  1. 0

    You almost had it. For each side, set that side position to 0 (i.e., for top, set top: 0, etc.). Then just give each side’s corresponding border width to 50% of the viewport height for the top and bottom triangles, and 50% of the viewport width for the left and right triangles.

    The best part is that since you’re using viewport lengths, there’s no media query needed. It will always fill the viewport.

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
}
  
.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
  
.triangle {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 1;
}
  
.top {
  top: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-top: 50vh solid #FF5733;
}

.bottom {
  bottom: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-bottom: 50vh solid #581845;
}

.left {
  left: 0;
  border-top: 50vh solid transparent;
  border-bottom: 50vh solid transparent;
  border-left: 50vw solid #C70039;
}
  
  
.right {
  right: 0;
  border-top: 50vh solid transparent;
  border-bottom: 50vh solid transparent;
  border-right: 50vw solid #900C3F;
}
    <div class="container">
  <div class="triangle top"></div>
  <div class="triangle right"></div>
  <div class="triangle bottom"></div>
  <div class="triangle left"></div>
</div>

    Of course this can also be done with just one element too…

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.triangles {
  position: absolute;
  inset: 0;
  border-left: 50vw solid #C70039;
  border-right: 50vw solid #581845;
  border-bottom: 50vh solid #900C3F;
  border-top: 50vh solid #FF5733;
}
    <div class="container">
  <div class="triangles"></div>
</div>
    Login or Signup to reply.
  2. 0

    I think clip-path is how I would do it, rather than fussing around with borders.

    body {
  margin: 0;
}

.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
  
.triangle {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  
.top {
  background: #FF5733;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}
  
.left {
  background: #C70039;
  clip-path: polygon(0 0, 0 100%, 50% 50%);
}
  
.bottom {
  background: #581845;
  clip-path: polygon(0 100%, 100% 100%, 50% 50%);
}
  
.right {
  background: #900C3F;
  clip-path: polygon(100% 0, 100% 100%, 50% 50%);
}
    <div class="container">
      <div class="triangle top"></div>
      <div class="triangle left"></div>
      <div class="triangle bottom"></div>
      <div class="triangle right"></div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search