JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap"><i class="bg"></i>
        Lorem!
    </div>

CSS

.wrap { min-height: 30px; position: relative;background: left top url(http://selenit.freeoda.com/images/1.jpg) fixed;}
    .bg {
        position: absolute;
        width: 20px;
        height: 20px;
        
        content: '';
        bottom: -10px;
        left: 50%;
        margin-left: -15px;
        overflow: hidden;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        
        z-index: -1;
    }
        .bg::after {
            position: absolute;
            content: '';
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            background: left top url(http://selenit.freeoda.com/images/1.jpg) fixed;
            height: 200px;
            width: 200px;
            left: -96px;
            top: 0;
            
        }