Site logo

Archived topic

Skew section bottom

5 replies · Started by Anders Nielsen on August 22, 2019

Viewing posts 1–6 of 6

Is there a way I can grab the bottom of a section, and skew it

{
transform: skew(-3deg, 3deg);
}

I would like the header (background-image) to have a skew bottom, and normal top

Hi there,

try this method, it adds a pseudo element with a gradient fill to the bottom of your section:

#generate-section-1.generate-sections-container {
    position: relative;
}

#generate-section-1.generate-sections-container:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 70%;
    background: rgb(239, 239, 239);
    background: linear-gradient(3deg, rgba(239, 239, 239, 1) 0%, rgba(239, 239, 239, 1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
}

awesome :)

Is there a way to isolate it, to the sections I choose - and not all of them?

Edit the Section(s) you want it applied to and on the Settings tab add a Custom CSS Class of your own e.g skew-container

Then in your CSS change both instances of:
#generate-section-1.generate-sections-container

to:

skew-container

Make sure the second CSS Rule is skew-container:before

You are the best :)

Glad to be of help :)

This archived topic is closed to new replies.