[Support request] How can I make a diagonal section?

[JOSE ALEJANDRO]

Hi! These days I’ve seen some websites with diferents sections, for example, all we know the normal section, rectangular, but if I want to make a diagonal section? How can I do to make something like that?

Here an example

[David]

Hi there,

there are lots of ways that developers accomplish this.
Some are just background images or gradients. Others use SVG shape dividers between sections. And the more complex would require Custom CSS that is specific to the design and content being applied. All of which is out of our scope.

This article covers some of the methods i mention:

https://css-tricks.com/creating-non-rectangular-headers/

[JOSE ALEJANDRO]

Exist some way where I can use that in my GP?

[David]

You can create them using some HTML – this will give you an idea of what is needed:

<div class="skewy">
    This is my skewed Content
</div>

and with this CSS:

.skewy {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform: skewY(-12deg);
    transform: skewY(-12deg);
    -webkit-transform-origin: 0;
    transform-origin: 0;
}

https://docs.generatepress.com/article/adding-css/

[JOSE ALEJANDRO]

Thank you a lot my bro!

[David]

You’re welcome. Have fun 🙂

[rossnmia]

How can I do this please with the main header like this: https://primalvideo.com/best-video-editing-app-for-iphone-ipad-2020-review/

[David]

Hi there,

can you raise a new topic where you can share a link to your site – i can then look at what the best solution is .

[Author]

Posts