JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="parent">маленький текст</div>
<div class="parent">треугольник в центре, ну почти, т.к. мне лениво было вырезать картинку. Блок тянется.</div>

CSS

.parent{
position:relative;
display:inline-block;
padding:30px;
height:39px;    
margin:50px;
background:url(http://alpatriott.ru/works/primer/images/r1.png) no-repeat center;
}

.parent:after{
content:'';
position:absolute;
left:50%;
bottom:10px;
margin-left:-12px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #edebdc;
}