Section dividers are a great way to break up your content into manageable chunks and make your website more visually appealing. A fancy is section is always cool. It is also better if the fancy section divider becomes responsive. A stylish section divider on your website is usually a plus. It’ll be much great if we can make them adaptable and responsive. This is what this article will teach you about section divider.
Here is a preview for Section Divider
Lets look at the HTML Code
<main class="container">
<section class="a"></section>
<section class="b"></section>
</main>The HTML is pretty simple, You have a container element with a top element & a bottom element.
We will first start to cut the bottom part of the top element.(ie. ‘a’) We will make use of CSS clip-path property. Something like below.
.a {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
}We will do the same for the bottom element with this code. Add margin-top to reduce the white space between the elements.
.b {
clip-path: polygon(0 0, 100% 80px, 100% 100%, 0 100%);
margin-top: -60px;
}Using CSS to create section dividers is a simple and effective way to improve the visual appeal of your website. By adding a few lines of code, you can create professional-looking dividers that will help your content stand out and make your website more user-friendly.
You can find the complete source code from here.
Thank you for reading this blog. Here are our other blogs you may like👇
Follow us on Instagram.
