How To Create Custom Shape Divider

In this topic,

We are going to see how to create a custom shape divider using CSS.

Step-1: Create Html Code in the index.html file.

  <div class="main-section">
    <div class="container">
      <div class="main-section-content">
        <h4>How it works.</h4>
        <h2>Your Gateway to a <br>whole new world of <br> Real Estate Investment.</h2>
  <div class="second-section">
    <div class="shap-divider"></div>

Step-2: Add CSS in<style>….</style> tag on index.html file.

  margin: 0;
.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
.main-section {
    background-color: #0a004b;
    padding: 100px 15px;
.main-section-content h2 {
    color: #fff;
    margin: 0;
    font-size: 42px;
    font-family: monospace;
.main-section-content h4{
  color: #6edeff;
  margin: 0;
.shap-divider {
    position: absolute;
    top: -2;
    left: 0;
    width: 100%;
    background: #0a004b;
    height: 130px;
    clip-path: polygon(0px 0px, 20% 100%, 100% 0px);
    z-index: 99;
    transition: 600ms linear;

Review the below image.

I hope you guys found something useful  ??

Submit a Comment

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


Select Categories