JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="banners">
    <div class="image active" style="background-color: red;">
        <div class="corner"></div>
    </div>

    <div class="image" style="background-color: blue;">
        <div class="corner"></div>
    </div>
</div>

CSS

.banners {
    width: 800px;
    height: 600px;
}

.image {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
}

.image.active {
     z-index: 1;
     clip-path: polygon(100% 0, 100% 65%, 60% 100%, 0 100%, 0 0);
}

.corner {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
}

JavaScript

$(document).ready(function () {
    $('.corner').click(function() {
        $('.image.active').removeClass('active');
        $(this).parent().addClass('active');
    });
});