Ads Top

How to create curved background in css?

How to create curvy background in css with HTML? 

Need to start using css ::after elements then we can do. Also we can use svg image as a background in css OR direct use on the html structure.

We can see below code:-

Curvy-background1.Html

<section>

        <div class="container">

            <h1>Section first 1</h1>

            <p>Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content</p>

            <p>Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content</p>

        </div>

        <div class="curyBackground">

            <svg id="curve1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1386.02 139.54">

                <path class="cls-1" d="M-10,150.08S225.44,35,466.3,80.18,1097.48,207.06,1371.68,121l4.3,88.18H-10Z" transform="translate(10.04 -69.68)"/></svg>

        </div>

    </section>

    <section class="section2">

        <div class="container">

            <h1>Section first 2</h1>

            <p>Section first 2 Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

            <p> Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

        </div>

        <div class="curyBackground">

            <svg id="curve2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1386.02 139.54">

                <path class="cls-1" d="M-10,150.08S225.44,35,466.3,80.18,1097.48,207.06,1371.68,121l4.3,88.18H-10Z" transform="translate(10.04 -69.68)"/></svg>

        </div>

    </section>

    <section class="section3">

        <div class="container">

            <h1>Section first 2</h1>

            <p>Section first 2 Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

            <p> Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

        </div>

        <div class="curyBackground">

            <svg id="curve3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1386.02 139.54">

                <path class="cls-1" d="M-10,150.08S225.44,35,466.3,80.18,1097.48,207.06,1371.68,121l4.3,88.18H-10Z" transform="translate(10.04 -69.68)"/></svg>

        </div>

    </section>

 

Curvy1.css

body{

    margin0;

    padding0;

    border0;

    height100vh;

}

h1margin0padding0;}

section{

    backgroundaqua;

    positionrelative;

    width100%;

    margin0;

    z-index2;

}

#curve1{

    positionabsolute;

    bottom0;

    width100%;

    z-index1;

}

#curve1 path{

    fillbrown;

}

#curve2{

    positionabsolute;

    bottom0;

    width100%;

    z-index1;

}

#curve2 path{

    fillpink;

}

section.section2{

    background:brown;

}

#curve3{

    positionabsolute;

    bottom0;

    width100%;

    z-index1;

}

#curve3 path{

    fillpink;

}

section.section3{

    background:pink;

}

.container{

    max-width1000px

    margin0px auto;

    padding-bottom138px;

}



 

 

Curvy-background2.Html

<section>

        <div class="container">

            <h1>Section first 1</h1>

            <p>Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content</p>

            <p>Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content</p>

        </div>

    </section>

    <section class="section2">

        <div class="container">

            <h1>Section first 2</h1>

            <p>Section first 2 Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

            <p> Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

        </div>

    </section>

    <section class="section3">

        <div class="container">

            <h1>Section first 3</h1>

            <p>Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 </p>

            <p>Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 Section first 3 </p>

        </div>

    </section>

 

Curvy2.css

*margin0padding0;}

body{

    margin0;

    padding0;

    border0;

    box-sizingborder-box;

}

section{

    backgroundaqua;

    positionrelative;

    width100%;

    padding-bottom50px;

}

section::after{

    positionabsolute;

    content'';

    width100%;

    height100px;

    backgroundaqua;

    border-radius50%;

    z-index0;

    bottom-50px;

}

section.section2{

    background#fff;

    positionrelative;

    width100%;

    padding-bottom50px;

    margin-top50px;

}

section.section2::after{

    positionabsolute;

    content'';

    width100%;

    height100px;

    background#fff;

    border-radius50%;

    z-index1;

    bottom-50px;

}

section.section3{

    background#0bf;

    positionrelative;

    width100%;

    padding-bottom50px;

    padding-top50px;

}

section.section3::after{

    positionabsolute;

    content'';

    width100%;

    height100px;

    background#0bf;

    border-radius50%;

    z-index0;

    bottom-50px;

}

 

.container{

    max-width1000px

    margin0px auto -50px;

    positionrelative;

    padding-top20px;

    z-index10;

}

 


 

Curvy-background3.Html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Curvy Background</title>

    <link href="cury2.css" rel="stylesheet"/>

</head>

<body>

    <section class="gray">

        <div class="container">

            <h1>Section first 1</h1>

            <p>Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content</p>

            <p>Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content Section first 1 content</p>

        </div>

        <div class="section-arrows white">

            <div class="section-arrow left"></div>

            <div class="section-arrow right"></div>

        </div>

    </section>

    <section class="white">

        <div class="container">

            <h1>Section first 2</h1>

            <p>Section first 2Section first 2 Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  </p>

            <p> Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

        </div>

        <div class="section-arrows pink">

            <div class="section-arrow left"></div>

            <div class="section-arrow right"></div>

        </div>

    </section>

    <section class="pink">

        <div class="container">

            <h1>Section first 2</h1>

            <p>Section first 2Section first 2 Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  </p>

            <p> Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2  Section first 2 </p>

        </div>

        <div class="section-arrows white">

            <div class="section-arrow left"></div>

            <div class="section-arrow right"></div>

        </div>

    </section>

   

</body>

</html>

 

Curvy3.css

*margin0padding0;}

body{

    margin0;

    padding0;

    border0;

    box-sizingborder-box;

}

section{

    positionrelative;

    width100%;

    overflowhidden;

}

 

/* ............... */

.section-arrows {

    positionrelative;

    height100px;

}

.section-arrow.left {

    left0;

}

.section-arrow {

    positionabsolute;

    z-index1;

    width50%;

    height100%;

    bottom0;

}

 

.section-arrow.left:after {

    content" ";

    width0;

    height0;

    border-right3000px solid transparent;

    positionabsolute;

    right-10px;

    bottom0;

}

.section-arrow.right {

    right0;

}

.section-arrows.white .section-arrow:after {

    border-bottom160px solid #fff;

}

.section-arrows.gray .section-arrow:after {

    border-bottom160px solid #eee;

}

.section-arrows.pink .section-arrow:after {

    border-bottom160px solid pink;

}

.section-arrow.right:after {

    content" ";

    width0;

    height0;

    border-left3000px solid transparent;

    positionabsolute;

    left-10px;

    bottom0;

}

section.white{

    background#fff;

}

section.gray{

    background#eee;

}

section.pink{

    background:pink;

}

.container{

    max-width1000px

    margin0px auto -50px;

    positionrelative;

    padding-top20px;

    z-index10;

}



No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.