JSFiddle - React, Tailwind, and code Playground

by hunt0194

HTML

<div class="indx-img">
  	<div class="mask"></div>
</div>

CSS

.indx-img {
	position: relative;
	padding: 16% 0;
	background-color: red;
}

.mask:before {
    border-left: 0 none;
    border-right: 20px solid transparent;
    left: 0;
}
.mask:after {
    border-left: 20px solid transparent;
    border-right: 0 none;
    right: 0;
}
.mask:before, .mask:after {
    border-bottom: 20px solid #fff;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    width: 50%;
    box-sizing: border-box;
}
.mask {
    bottom: 0;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1000;
}