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

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);
}

Perfect thank you

Can this be done on two axis's? So there is a "point" to the image?

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 ?

A V shape so its pointing down

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%;
}