JSFiddle - React, Tailwind, and code Playground

HTML

<p>HERE IS THE PARAGRAPH</p>
<div class="section-top">
	<div>
  	<svg viewBox='0 0 100 50' preserveAspectRatio="none">
        <rect x="0" y="0" height="50" width="100" />
  		
        <defs><clipPath id="section2a"><polygon points='0,0 100,5 100,50 '/></clipPath>
        <pattern patternUnits="userSpaceOnUse" id="pat1" x="0" y="0" width="1px" height="1px">
            <image width="1px" height="1px" xlink:href="https://www.designzillas.com/sites/default/files/2016-05/New-Dippin-Dots-International-Website.jpg" />
        </pattern>
        </defs>
		</svg>
	</div>
</div>

CSS

.section-top{position:absolute;width:100%;top:250px;}
.section-top	div{height:0;position: relative;padding-top:50%;}
svg{height: 100%;display:block;width: 100%;position: absolute;top:0;left:0;}
rect{stroke:none;fill:url(#pat1);clip-path: url(#section2a);}
p{height:200px;background: url(https://www.designzillas.com/sites/default/files/2016-05/New-Dippin-Dots-International-Website.jpg);}