[Support request] Slanted Dividers

[Sam]

Hi guys,

I am trying to create something like the slanted containers you see here:

https://stripe.com/sg

May I know how do you do that?

I tried using transform: skew(-12) as i saw, but it didn’t work, and it slanted the entire container (including the text).

Trying to reverse skew the text back (skew 12) made the text very blurry.

Thanks guys!

[Leo]

Hi there,

David offer some insight here that might help:
https://generatepress.com/forums/topic/how-can-i-make-a-diagonal-section/#post-675793

There should be lots of online resource for this as well as this one:
https://css-tricks.com/creating-non-rectangular-headers/

Hope this helps!

[Sam]

Hi Leo,

That’s exactly what I did – however, the text skewed together with the header container too.

Check screenshot:

https://drive.google.com/file/d/1pgCyelocgLf2rMuiC4AI-JQLa_N6c659/view?usp=sharing

The question is – how can I skew the header (with Elements) without skewing the content within?

As mentioned, I tried skewing the content back, but it just ended up blurry.

Thanks!

[David]

Hi there,

try this for the skew property.

transform: translateZ(0) skew(-12deg);

It forces the GPU to re-render the font.

[Sam]

Hi David, didn’t seem to work. I read somewhere that it has something to do with transform origin or something like that.

Does that work?

[David]

Personally i would not use this method if it is only the background you want ‘skewed’.
The simplest method is to use Image or Linear Gradient background. The latter being the most efficient.
If the background has more complex content then Divide the section into two DIVs. One for the front content (unskewed) and one for the background content (skewed). You can then skew and absolutely position the background behind the front content.

Let me know what you are using to build the section containers and the preferred method.

[Sam]

Hey David,

Thanks for quick response.

As mentioned, I am currently using Elements to build the container.

But in general, I would like to know how to build it using Sections too, since those containers will be skewed too.

Would you suggest me to not using sections, and just use the text editor, from what I am sensing?

Thank you!

[David]

you can do this:

Give the Hero Element or a Section a class of skewed
Within the content add the front content and then set your background content in a div like so:

<div class="skew-background">
my background content
</div>

Then add this CSS:

.skewed {
	position: relative;
}
.skewed .skew-background {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: red;
	transform: skewy(12deg);
	z-index: -1;
}

[Author]

Posts