Adding a waves or shape divider is a modern and creative way to separate the sections on a website. The simplest way to create this effect is to add a SVG to your HTML. You can generate one on (https://getwaves.io/).
While the HTML is pretty straight-forward, it is necessary to use CSS to place the header element in front of the background image and SVG, which can be achieved with the z-index property. Also, you will need to set the position property of the SVG to absolute in order for it to be placed on top of the image rather than above it. You should set the top and right properties to 0, so that the "wave" is pinned regardless of the screen size.
<body>
<main>
<section class="menu">
<h2 class="text-center menu-title">Menu</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#FAF883"
fill-opacity="1"
d="M0,96L60,122.7C120,149,240,203,360,240C480,277,600,299,720,261.3C840,224,960,128,1080,128C1200,128,1320,224,1380,272L1440,320L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
></path>
</svg>
<img src="gallery-background.jpg" alt="" class="gallery-background" />
</section>
</main>
</body>
.menu {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.menu-title {
font-family: Satisfy;
font-size: 3em;
margin-top: 0.2em;
position: absolute;
z-index: 4;
}
.gallery-background {
width: 100%;
opacity: 0.5;
}
svg {
position: absolute;
top: 0;
right: 0;
width: 100%;
z-index: 3;
}
Top comments (0)