JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">мало текста</div>

<div class="parent">целая строчка текста, но треугольник в центре и имеет продолжение фона</div>

CSS

.parent{
position:relative;    
display:inline-block;
padding:30px;
margin:50px;    
background:url(http://alpatriott.ru/works/primer/images/romashki.jpg) no-repeat;    
overflow:hidden;
}

.parent:before, .parent:after{
content:'';
position:absolute;
background:#fff;
bottom:0px;
height:20px;
width:50%;    
}

.parent:before{
left:-5px;    
-webkit-transform:skewX(30deg);
-moz-transform:skewX(30deg) translateY(1px);
-ms-transform:skewX(30deg);
-o-transform:skewX(30deg);
transform:skewX(30deg);            
}

.parent:after{
right:-5px;    
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg) translateY(1px);
-ms-transform:skewX(-30deg);
-o-transform:skewX(-30deg);
transform:skewX(-30deg);        
}