[Support request] Slanted Dividers

Home Forums Support [Support request] Slanted Dividers

Home Forums Support Slanted Dividers

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #683919

    Hi guys,

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


    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!

    GeneratePress 2.1.4
    GP Premium 1.7.2
    Customer Support

    Hi there,

    David offer some insight here that might help:

    There should be lots of online resource for this as well as this one:

    Hope this helps!


    Hi Leo,

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

    Check screenshot:


    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.


    Customer Support

    Hi there,

    try this for the skew property.

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

    It forces the GPU to re-render the font.


    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?

    Customer Support

    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.


    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!

    Customer Support

    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

    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;
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.