<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.