JSFiddle - React, Tailwind, and code Playground
HTML
<div><p>похоже?</p></div>
CSS
div{
position: relative;
width: 187px;
height: 222px;
margin: 50px;
color: #fff;
background: #333;
}
div{
transform: rotate(-90deg);
}
p {
width: 187px;
height: 222px;
margin: 50px;
color: #fff;
background: #333;
top:0;
left:0;
position:absolute;
transform: rotate(90deg);
}
div:before, div:after{
content:'';
position: absolute;
top: 0;
bottom: 0;
width: 50%;
background: #333;
border-radius: 10px;
z-index: -1;
}
div:before{
left: -20px;
-webkit-transform: skewX(-5deg);
-moz-transform: skewX(-5deg);
-o-transform: skewX(-5deg);
-ms-transform: skewX(-5deg);
transform: skewX(-5deg);
}
div:after{
right: -20px;
-webkit-transform: skewX(5deg);
-moz-transform: skewX(5deg);
-o-transform: skewX(5deg);
-ms-transform: skewX(5deg);
transform: skewX(5deg);
}