<div id="jagged-page">
    <div id="jagged-wrapper">
        <img src="https://kryogenix.org/images/css-jagged-banner.jpg">
    </div>
</div>

body { background: black; }
#jagged-page {
    padding: 3em;
    max-width: 500px;
}
#jagged-wrapper {
    position: relative;
    width: 100%;
    height: 0%;
    padding-bottom: 37%;
}
#jagged-wrapper img {
    position: absolute;
    z-index: 1;
    width: 100%;
}
#jagged-wrapper::after {
    content: "";
    background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none"><polygon style="fill:white;" points="1,0 1,1 0,1 "/></svg>');
    background-size: 30px 30px;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0px;
    right: 0;
    z-index: 2;
}