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

HTML Two Div Parallel to each other

I am trying to achieve the following by putting two divs side by side to each other.
enter image description here

What I tried is, rotating the second div as well as tried to use a linear-gradient but it doesn’t give me the same result.

This was the closet I was able to get to it, but I need the divs to be side by side, and not inside it.

<div style="width: 100vh; height:20vh; position: relative; background-color: black;">
<div style="background: linear-gradient(to bottom right, transparent 50%, red 50%); width: 50%; height:100%; position: absolute; top: 0; right: 0;"></div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to achieve the desired result using a polygon.

    <div style="width: 100vh; height:20vh; position: relative; background-color: black;">
    <div style="width: 50%; height: 100%; background-color: red; clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);"></div>
</div>

  2. 0

    Why don’t you create 2 elements for both colours, then wrap them in a parent element and rotate parent via transform: rotate(90deg);?

    Obviously adjust the angle to fit your needs and give border-radius.

    This parent then could be positioned using absolute / relative – depending on the layout…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search