[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
    Posts
  • #683919
    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!

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #684021
    Leo
    Staff
    Customer Support

    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!

    #684211
    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!

    #684219
    David
    Staff
    Customer Support

    Hi there,

    try this for the skew property.

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

    It forces the GPU to re-render the font.

    #684271
    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?

    #684458
    David
    Staff
    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.

    #684470
    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!

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