<div class="water-box">
  <div class="wrap">
    <div class="water"></div>
  </div>
  <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
</div>

<svg id="waves">
  <filter id="turbulence" x="0" y="0" width="100%" height="100%">
    <feTurbulence id="sea-filter" numOctaves="3" seed="2" baseFrequency="0.02 0.05"></feTurbulence>
    <feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
    <animate xlink:href="#sea-filter" attributeName="baseFrequency" dur="60s" keyTimes="0;0.5;1" values="0.02 0.06;0.04 0.08;0.02 0.06" repeatCount="indefinite">
    </animate>
</svg>
body {
  margin: 0;
  padding: 0;
}
/* just for demo and not needed*/
body:after{
  content:"";
  position:fixed;
  left:0;right:0;top:0;bottom:0;
  z-index:-1; background:url(https://picsum.photos/1800/1200) no-repeat 50%;
background-size:cover;
}
/* .... */
.wrap,
.water {
  position: relative;
  background: url("https://i.ibb.co/CHHMHrR/pink-cherry-blossom-on-black-260nw-48419839.jpg")
    no-repeat 50% 50%;
  background-size: cover;
}
.water-box {
  margin:10px 10px 10px auto;
  width: 25%;
  background: #000;
  color: #fff;
  border: 1px solid silver;
  box-shadow:0 0 20px rgba(255, 255 ,255,0.7);
}
.wrap {
  width: 100%;
  padding: 100% 0 0;
}
.water {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0% 62%, 0% 100%, 100% 100%, 100% 62%);
  filter: url("#turbulence");
}
.water-box p {
  padding: 10px;
  margin: 0 0 1rem;
}
#waves {
  position: absolute;
  top: -999rem;
  left: -999rem;
}

.outer {
  max-width: 980px;
  margin: auto;
  padding: 10px;
  background: #f9f9f9;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.