JSFiddle - React, Tailwind, and code Playground

by Daniele Cedro

HTML

<div id="pippo">
<div class="v">
<img src="http://www.comunelive.it/Repository/comunelive/Upload/2018/id_298/slide_uno.png"/>
</div>
</div>

CSS

.v {
	position: relative;
}
.v:after {
	border-top: 80px solid transparent;
	border-right: 80px solid transparent;
	border-left: 50vw solid green;
	position: absolute;
	bottom: 0px;
	left: 0px;
	content: "";
	display: block;
	z-index: 100;
}

@media (max-width: 750px) {
.v:after {
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
}
}
.v:before {
	z-index: 100;
	border-top: 80px solid transparent;
	border-right: 50vw solid green;
	border-left: 80px solid transparent;
	position: absolute;
	bottom: 0px;
	right: 0px;
	content: "";
	display: block;
}

@media (max-width: 750px) {
.v:before {
	border-top: 20px solid transparent;
	border-left: 20px solid transparent;
}
}

@media (min-width: 1600px) {
.v:after {
	border-left: 800px solid red;
}
.v:before {
	border-right: 800px solid red;
}
}