Creating professional-looking Section Divider with CSS

Section Divider with CSS | Code Architects

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

Section Divider Preview | Code Architects

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.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *

sixteen − 8 =