JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap"><i class="bg"></i>
         ылвлыоы лдылы лывовыаывлдаывдлаоывлдаыволаывавыодлавыдла выдл вылд вылдовылдаовыловылда овыдлаоывлд овыдлаоывдлао ывдла вылдоывдлавылдовылд выоадл ыва         ылвлыоы лдылы лывовыаывлдаывдлаоывлдаыволаывавыодлавыдла выдл вылд вылдовылдаовыловылда овыдлаоывлд овыдлаоывдлао ывдла вылдоывдлавылдовылд выоадл ывадлвы оадлвы оадлыводвоыаывдлоылыводлыво влылдыводлываодлывоадлвыадлвы оадлвы оадлыводвоыаывдлоылыводлыво влылдыводлываодлывоадлвыа
    </div>

CSS

body { background: red; margin: 0;}
.wrap {  
  
    position: relative;
    background:  url(http://alpatriott.ru/works/primer/images/romashki.jpg) fixed no-repeat;
}
    .bg {
        position: absolute;
        width: 50px;
        height: 50px;
        content: '';
        bottom: -25px;
        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:  url(http://alpatriott.ru/works/primer/images/romashki.jpg) fixed no-repeat;
            width: 200px;
            height: 200px;
            left: -75px;
            top: -75px;
            
        }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        body { background: red; margin: 0;}
.wrap {  
    
    position: relative;
    background:  url(http://alpatriott.ru/works/primer/images/romashki.jpg) fixed  left top no-repeat;
    
}
    .wrap:after{
        position: absolute;
        content: '';
        height: 37px;
        width: 100px;
        bottom: -37px;
        left: 50%;
        margin-left: -50px;
        
        background:  url(http://alpatriott.ru/works/primer/images/romashki.jpg) left top fixed no-repeat;
        -webkit-mask: url(http://selenit.freeoda.com/images/img_3.png) center -2px no-repeat;
        
        
    }
    .bg, .bg::after{ display: none;}    
             
    }