JSFiddle - React, Tailwind, and code Playground

HTML

<div class="poligon">
  <p class="lolo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil earum officiis</p>
</div>

CSS

.poligon{
  width: 250px;
  height: 200px;
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR77eNCiYN77LZWrfX2yAN4Ur8GpWTouSgqTb19OsQifa6oUEZGG4KzGfcc);
  background-size: cover;
  -webkit-clip-path: polygon(20% 0, 80% 0, 100% 50%, 100% 50%, 80% 100%, 20% 100%, 0 50%, 0 50%);
  position: relative;
}

.lolo{
  width: 210px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  margin: 0 auto;
  background-color: rgba(0,0,0, 0.8);
  color: red;
}