Two triangles to make a rectangle

Question

I am trying to get two triangles to make a rectangle. I then want to put content into each triangle. I am following a previous question's answer from here: Previous Question.

My issue is that I cannot get the rectangle to be width: 80vw without the height being massive. Then, I am not sure how I can put content into an after element or if this is even the best way to design this knowing that I will be putting content into the triangles.

Does anyone know how I can do this or have any better solutions?

#tierBoxSec {
    position: relative;
    height: auto;
    width: 100%;
}

.box {
    width: 80vw;
    height: 200px;
    background: radial-gradient(at top left, #FFF 49%, #b82222 50%, #b82222 100%);
}

<section id="tierBoxSec">
    <div class="box"></div>
</section>

I would suggest working with linear gradients instead, out of a personal hatred for pseudoselectors. Here's a good example you can play around with: https://codepen.io/machal/pen/licEd — Our_Benefactors, Jun 08 '18 at 16:59
@Our_Benefactors Thanks for the suggestion. I just edited my snipped in my attempt to do this. I can't figure out how to get the linear-gradient to be a sharp angled split. Any ideas? — Paul, Jun 08 '18 at 17:10

score 5 · Accepted Answer · edited Feb 06 '21 at 12:19

I've made a snippet better illustrating how to do this with linear gradients:

red 50%, blue 50% is setting a "color stop" of 50% for each color, meaning they won't continue past 50% of the gradient area. You could create different demarcation lines by doing something like red 25%, blue 25%, for example.

#box {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, red 50%, blue 50%);
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient -->
<body>
  <div id="box">
  </div>
</body>

score 2 · Answer 2 · edited Jun 13 '18 at 07:38

2

Here is an improvement for the linear-gradient solution to have a responsive block:

.box {
  width: 80vw;
  height: 80vh;
  background: linear-gradient(to top right, red 49.9%, blue 50.1%);
}

<div class="box"></div>

edited Jun 13 '18 at 07:38

Takit Isy

9,688
3
23
47

answered Jun 08 '18 at 22:18

Temani Afif

245,468
26
309
415

Takit Isy · Answer 3 · 2018-06-13T07:40:57.583

Here is a solution using borders and box-sizing:

#box {
  height: 8vh;
  width: 80vh;
  box-sizing: border-box;
  background: red;
  border-style: solid;
  border-width: 8vh 80vh;
  border-color: blue red red blue;
}

<div id="box"></div>

⋅ ⋅ ⋅

If you really want two distincts triangles, here is a "forked" solution of the above, using the ::after pseudo-element :

#box {
  position: relative;
  height: 8vh;
  width: 80vh;
  box-sizing: border-box;
  border: solid transparent;
  border-width: 8vh 80vh;
  border-top-color: blue;
  border-right-color: blue;
}

#box::after {
  position: absolute;
  content: '';
  border: solid transparent;
  border-width: 8vh 80vh;
  border-bottom-color: red;
  border-left-color: red;
  transform: translate(-50%, -40%); /* Change -40% to -50% if you want the two triangle to stick */
}

<div id="box"></div>
<br>
(I've let a space just to show you)

Hope it helps.

Two triangles to make a rectangle

3 Answers3