[Support request] How can I add a header image with a diagonally cut off bottom

Home Forums Support How can I add a header image with a diagonally cut off bottom

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1218814
    rossnmia

    How can I add a header with a diagonal slice off the bottom please (doesn’t have to have two angles, just one diagonal slice) and what is this called when you add a skewed bottom/top image like this: https://primalvideo.com

    #1219331
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    .page-hero {
        position: relative;
        overflow: hidden;
    }
    
    .page-hero:before {
        content: '';
        pointer-events: none;
        background: rgb(255, 255, 255);
        position: absolute;
        width: 100%;
        height: 90px;
        left: 0;
        bottom: -45px;
        transform: skewY(3deg);
    }
    #1220381
    rossnmia

    Perfect thank you

    #1220408
    rossnmia

    Can this be done on two axis’s? So there is a “point” to the image?

    #1220568
    David
    Staff
    Customer Support

    Not using that method, which way does the ‘point’ err point ?
    Are we looking at a white triangle pointing up ? Or do you want more a V shape so its pointing down ?

    #1222835
    rossnmia

    A V shape so its pointing down

    #1223101
    David
    Staff
    Customer Support

    Ok – remove the CSS i provided above.
    Edit your Header Element and after the text add this:

    <div class="shape-divider-bottom">
        <svg width="100%" height="100%" viewBox="0 0 10584 834" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
            <g transform="matrix(4.16667,0,0,4.16667,0,0)">
                <g transform="matrix(1,0,0,0.83,0,34)">
                    <path d="M2540,0L1270,138.554L0,0L0,200L2540,200L2540,0Z" style="fill:white;"/>
                </g>
            </g>
        </svg>
    </div>

    Then add this CSS to the site:

    .page-hero {
        position: relative;
    }
    
    .page-hero .shape-divider-bottom svg {
        vertical-align: bottom;
    }
    
    .page-hero .shape-divider-bottom {
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.