Jump to content
brandy

CSS - Positioning two skewed divs

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

Share this post


Link to post
Share on other sites

Here is what I came up with:

Codepen

Let me know if it is what you were after 🙂

  • Like 3

Share this post


Link to post
Share on other sites

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

Thanks a lot!

  • Thanks 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...