Jump to content

CSS - Positioning two skewed divs


brandy
 Share

Recommended Posts

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!

 

2-divs-skew.jpg

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...