JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<div class="block">Мужик!</div>

CSS

html {
	width: 100%;
	height: 100px;
}
body {
	width: 100%;
	height: 100px;
	background: url('http://www.filmoholicy.pl/pictures/mezczyzni/Luke_Evans/luke_evans_2.jpg') 50% 0 / cover no-repeat;
}
.block {
	width: 300px;
	height: 100px;
	background: red;
	position: relative;
	font-size: 60px;
	line-height: 100px;
	color: #fff;
	z-index: 2;
	text-align: center;
}
.block:after,
.block:before {
	content: '';
	position: absolute;
	z-index: 1;
}
.block:after {
	right: -50px;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 0 0 50px;
	border-color: transparent transparent transparent red;
}
.block:before {
	right: -50px;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 0;
	border-color: red transparent transparent transparent;
}