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{
margin: 0;
padding: 0;
border: 0;
height: 100vh;
}
h1{ margin: 0; padding: 0;}
section{
background: aqua;
position: relative;
width: 100%;
margin: 0;
z-index: 2;
}
#curve1{
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
}
#curve1 path{
fill: brown;
}
#curve2{
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
}
#curve2 path{
fill: pink;
}
section.section2{
background:brown;
}
#curve3{
position: absolute;
bottom: 0;
width: 100%;
z-index: 1;
}
#curve3 path{
fill: pink;
}
section.section3{
background:pink;
}
.container{
max-width: 1000px;
margin: 0px auto;
padding-bottom: 138px;
}
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
*{ margin: 0; padding: 0;}
body{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
section{
background: aqua;
position: relative;
width: 100%;
padding-bottom: 50px;
}
section::after{
position: absolute;
content: '';
width: 100%;
height: 100px;
background: aqua;
border-radius: 50%;
z-index: 0;
bottom: -50px;
}
section.section2{
background: #fff;
position: relative;
width: 100%;
padding-bottom: 50px;
margin-top: 50px;
}
section.section2::after{
position: absolute;
content: '';
width: 100%;
height: 100px;
background: #fff;
border-radius: 50%;
z-index: 1;
bottom: -50px;
}
section.section3{
background: #0bf;
position: relative;
width: 100%;
padding-bottom: 50px;
padding-top: 50px;
}
section.section3::after{
position: absolute;
content: '';
width: 100%;
height: 100px;
background: #0bf;
border-radius: 50%;
z-index: 0;
bottom: -50px;
}
.container{
max-width: 1000px;
margin: 0px auto -50px;
position: relative;
padding-top: 20px;
z-index: 10;
}
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
*{ margin: 0; padding: 0;}
body{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
section{
position: relative;
width: 100%;
overflow: hidden;
}
/* ............... */
.section-arrows {
position: relative;
height: 100px;
}
.section-arrow.left {
left: 0;
}
.section-arrow {
position: absolute;
z-index: 1;
width: 50%;
height: 100%;
bottom: 0;
}
.section-arrow.left:after {
content: " ";
width: 0;
height: 0;
border-right: 3000px solid transparent;
position: absolute;
right: -10px;
bottom: 0;
}
.section-arrow.right {
right: 0;
}
.section-arrows.white .section-arrow:after {
border-bottom: 160px solid #fff;
}
.section-arrows.gray .section-arrow:after {
border-bottom: 160px solid #eee;
}
.section-arrows.pink .section-arrow:after {
border-bottom: 160px solid pink;
}
.section-arrow.right:after {
content: " ";
width: 0;
height: 0;
border-left: 3000px solid transparent;
position: absolute;
left: -10px;
bottom: 0;
}
section.white{
background: #fff;
}
section.gray{
background: #eee;
}
section.pink{
background:pink;
}
.container{
max-width: 1000px;
margin: 0px auto -50px;
position: relative;
padding-top: 20px;
z-index: 10;
}
No comments:
Note: Only a member of this blog may post a comment.