JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square">
    <div class="square__big">акция</div>
    <div class="square__triangle"></div>
    <div class="square__small-first"></div>
    <div class="square__small-second"></div>
</div>

CSS

.square {
    width:180px;
    height:60px;
    background-color:#8B3A3A;
    font-size:0px;
    position:relative;
}
.square__big {
    color:#fff;
    font-size:30px;
    line-height:60px;
    text-transform:uppercase;
    padding-left:10px;
    background-color:#CD0000;
    width:130px;
    display:inline-block;
    vertical-align:top;
}
.square__triangle {
    display:inline-block;
    width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-left: 32px solid #CD0000;
	border-bottom: 30px solid transparent;
}
.square__small-first {
    position:absolute;
    top:0px;
    right:0px;
    width: 0;
	height: 0;
	border-top: 35px solid #CD3700; 
	border-left: 37px solid transparent;

}
.square__small-second {
    position:absolute;
    bottom:0px;
    right:0px;
    width: 0;
	height: 0;
	border-bottom: 35px solid #CD3700; 
	border-left: 37px solid transparent;

}