Archived topic
Skew section bottom
5 replies · Started by Anders Nielsen on August 22, 2019
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 :)