JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">форма поиска</div>
CSS
.parent{
position:relative;
display:inline-block;
padding:30px;
margin:50px;
background-color: #bfb8b8;
overflow:hidden;
}
.parent:before, .parent:after{
content:'';
position:absolute;
background:#fff;
bottom:0px;
height:7px;
width:50%;
}
.parent:before{
left:-80px;
-webkit-transform:skewX(30deg);
-moz-transform:skewX(30deg) translateY(1px);
-ms-transform:skewX(30deg);
-o-transform:skewX(30deg);
transform:skewX(30deg);
}
.parent:after{
right:0px;
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg) translateY(1px);
-ms-transform:skewX(-30deg);
-o-transform:skewX(-30deg);
transform:skewX(-30deg);
}