CSS - Positioning two skewed divs

[brandy]

Hi!

I´m trying to make 2 centered divs with inclined sides and I got stucked.

I have two divs (2a, 2b) which are inclined, positioned in a div (2) with the width of the two inclined divs.

I put one div above, which cut everything at the width of the viewport.

This is what I got - it´s working how I want it - The only thing is, that the second div (2) should center in the "main"-div (1), so that the inclination-line is in the middle and the divs (2a, 2b) cut off at the sides.

<div class="1" style="width: 100%; overflow: hidden; text-align: center; ">
	<div class="2" style="width: 2000px;">
		<div class="2a" style="transform: skew(20deg); height: 500px; background-color: red; width: 1000px; float: right;">
			textytext
		</div>
		<div class="2b" style="transform: skew(20deg); height: 500px; background-color: blue; width: 1000px;">
			textytext
		</div>
	</div>
</div>

I hope you understand!
Thanks a lot!

 

[3fingers]

Here is what I came up with:

Codepen

Let me know if it is what you were after ?

[brandy]

Wow, this is it.
I read about clip-path and wasn´t sure, if this is a possibility for this problem!

Thanks a lot!

[brandy]

And how would you center some lines of text in the div?

[3fingers]

29 minutes ago, brandy said:

And how would you center some lines of text in the div?

I have updated Codepen with a solution. Be aware that is an hacky one, because on narrow screen some text clipping might occour.
If you play with it a bit and you don't have a lot of text you can use it as a good starting point.