[Resolved] Skew section bottom

Home Forums Support [Resolved] Skew section bottom

Home Forums Support Skew section bottom

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #990477
    Anders Nielsen

    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

    #990526
    David
    Staff
    Customer Support

    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%);
    }
    #990568
    Anders Nielsen

    awesome πŸ™‚

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

    #990579
    David
    Staff
    Customer Support

    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

    #990587
    Anders Nielsen

    You are the best πŸ™‚

    #990595
    David
    Staff
    Customer Support

    Glad to be of help πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.