HTML Two Div Parallel to each other

Question

I am trying to achieve the following by putting two divs side by side to each other.

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>

I don't have a ready-made solution, but there are [a variety of ways to achieve a "slant"](https://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive) which I imagine could be adapted here. I've also seen CSS tricks that use 100%-thick borders to create a slanted line (relying on the border corner with two different border colors, in this case it would be a blue border-top and grey border-left), though that might make this a total of 3 elements (content divs on each side and a styled div in the middle creating the transition design). — David, Aug 29 '23 at 15:12
OP will need to expand first why they need to be side-by-side. I'm guessing the divs will contain content as well? — DarkBee, Aug 29 '23 at 15:14
Does this answer your question? [Shape with a slanted side (responsive)](https://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive) — Sumurai8, Aug 29 '23 at 15:30
I think [Harry's answer](https://stackoverflow.com/a/30441123/82548) on the linked question should cover most of your requirements, may I ask where it fails? Could you [edit] that information into your question? — David Thomas, Aug 29 '23 at 15:38

score 1 · Answer 1 · edited Aug 29 '23 at 20:33

1

I was able to achieve the desired result using clip-path: 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>

edited Aug 29 '23 at 20:33

AStombaugh

2,930
5
13
31

answered Aug 29 '23 at 15:59

SamHoque

2,978
2
13
43

Tyler Seppala · Answer 2 · 2023-08-29T17:01:04.687

I've found the best way to do this sort of thing is to use the skew() function:

.outer-container {
  overflow: hidden;
  width: 15em;
  border-radius: 1em;
}
.container {
  display: flex;
  height: 5em;
  width: 120%;
  margin-left: -10%;
  transform: skew(25deg);
}
.dark-blue {
  background-color: blue;
  width: 50%;
}
.light-blue {
  background-color: lightblue;
  width: 50%;
}

<div class="outer-container">
  <div class="container">
    <div class="dark-blue"></div>
    <div class="light-blue"></div>
  </div>
</div>

What I'm doing here is putting the two colored divs into a parent, using skew to warp its shape, and then placing that warped div into another parent with overflow: hidden to cut off the angled edges. The margin-left in the .container class is to cut off the left side, and the width: 120% is to cut off the right side. You might have to adjust these values as you change the overall width, height and skew angle.

Then if your colored divs will contain content, style the content with transform: skew(-25deg) to counteract the skew of the parents.

score 0 · Answer 3 · answered Aug 29 '23 at 15:10

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…

HTML Two Div Parallel to each other

3 Answers3