Маска для блока (HTML, CSS)

.block { 
  position:relative; 
  padding-bottom:100px; 
} 
 
.block.block-1 { 
  background:#000 url(http://www.mrwallpaper.com/wallpapers/budapest-hungary.jpg) no-repeat center; 
} 
 
.block.block-2 { 
  background:#000 url(http://www.mrwallpaper.com/wallpapers/matthias-church-budapest.jpg) no-repeat center; 
} 
 
.block.block-3 { 
  background:#000 url(http://www.mrwallpaper.com/wallpapers/frankfurt-evening.jpg) no-repeat center; 
} 
 
.block-text { 
  max-width:400px; 
  margin:0 auto; 
  padding:40px 0; 
  color:#fff; 
  text-align:center; 
} 
 
.block-wave { 
  position:absolute; 
  left:0px; 
  bottom:0px; 
  width:100%; 
  height:100px; 
  background:url(https://i.stack.imgur.com/VFyWp.png) repeat-x center top; 
}

<div class="block block-1"> 
  <div class="block-text"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </div> 
  <div class="block-wave"></div> 
</div> 
 
<div class="block block-2"> 
  <div class="block-text"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </div> 
  <div class="block-wave"></div> 
</div> 
 
<div class="block block-3"> 
  <div class="block-text"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  </div> 
  <div class="block-wave"></div> 
</div>