Probably the easiest way would be to use an image or svg. Since you didn’t link the site, I can’t look at their code to see how they did it, but I found another site with a similar design that used an image.
Here is the relevant part of their site:
If you inspect with developer tools, you can see they have an image there. If you remove it, the site looks like this:
Their code for that is:
.element {
background-image: url(https://bitbucket-marketing-cdn.atlassian.com/dam/jcr:cd01b96d-381e-49ab-a487-c7d1df92cf59/atlassian%20wave%20adg30524.svg?cdnVersion=jh);
background-position: center bottom;
background-size: 1440px 126px;
background-repeat: repeat-x;
}
And the svg itself:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0052CC;}
</style>
<title>Rectangle 3</title>
<desc>Created with Sketch.</desc>
<path class="st0" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"/>
</svg>
Hopefully that will give you something to play with.
1 Like
- You can have the original image be a transparent png with that wave shape cutout,
- or have a white wave transparent image that you overlay on top of your image.
#1 will be easier and straightforward to do. But if the image is resized, the wave will also be resized along.
1 Like
You would also have to make some mods (sizing, etc) (as well as remove some unneeded parts), but especially with an svg wave (assuming you designed it so left and right sides ‘matched’), and this simple code example you could have a pretty cool ‘infinite wave’ effect.
https://css-tricks.com/infinite-all-css-scrolling-slideshow/
1 Like
thx brother for your help…