Skip to content

Instantly share code, notes, and snippets.

@shivampip

shivampip/shape_divider

Created January 19, 2021 12:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shivampip/7ac49f6e447d0b7cc293e02c8e164e60 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shivampip/7ac49f6e447d0b7cc293e02c8e164e60 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shivampip created this gist Jan 19, 2021.
    71 changes: 71 additions & 0 deletions shape_divider
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shapre Divider Test</title>
    </head>

    <style>
    body {
    padding: 0;
    margin: 0;
    }

    .box {
    width: 100%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    #b1 {
    background-color: blueviolet;
    position: relative;
    }

    #b2 {
    background-color: rgb(60, 240, 240);
    }

    .sd {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    }

    svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 120px;
    bottom: -1px;
    transform: rotate(180deg);
    }

    .shape-fill {
    fill: rgb(60, 240, 240);
    }
    </style>

    <body>

    <div class="box" id="b1">Hello

    <div class="sd">
    <svg data-name="Layer 1" // xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
    preserveAspectRatio="none">
    <path
    d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
    class="shape-fill"></path>
    </svg>
    </div>
    </div>
    <div class="box" id="b2">World</div>

    </body>

    </html>