Menu
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>
301
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
