Curve Section Seperator

In this example below you will see how to do a Curve Section Seperator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mychoo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mychoo ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Curve Section Seperator</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
	<div class="pdt">
		<!-- top padding -->
	</div>

	<section id="first-curve">
		<div class="page-top-icon">
		  <i class="fa fa-globe icon"></i>
		</div>
		<div class="container">
			<div class="row center mh">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>
			</div>
		</div>
	</section>
  	<section id="second-curve">
		<div class="page-top-icon">
		  <i class="fa fa-github icon icon-social"></i>
		</div>
		<div class="container">
			<div class="row center mh">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>
			</div>
		</div>
	</section>
  	<section id="third-curve">
		<div class="page-top-icon">
		  <i class="fa fa-facebook icon icon-social"></i>
		</div>
		<div class="container">
			<div class="row center mh">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient 
montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem.</p>
			</div>
		</div>
	</section>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mychoo/curve-section-seperator-yPmXVR */
section {
  position: relative !important;
}

.pdt {
  padding-top: 100px;
  background: #fff;
}

.center p, a {
  text-align: center;
  width: 100%;
  color: #fff;
  margin-top: 70px;
}

.mh {
  min-height: 300px;
}

.icon {
  padding-top: 18px;
  font-size: 36px;
}

.icon-social {
  margin-right: 5px;
}

a:hover {
  color: #fff;
}

#first-curve {
  background: #004990;
}

#first-curve .page-top-icon {
  position: absolute;
  width: 104px;
  height: 90px;
  margin: 0px auto;
  background: #004990;
  border-radius: 100%;
  color: white;
  text-align: center;
  text-indent: .1em;
  top: -30px;
  left: 50%;
  margin-left: -57px;
  z-index: 10px;
}

#first-curve .page-top-icon:before, #first-curve .page-top-icon:after {
  content: '';
  background: none;
  height: 40px;
  width: 61px;
  position: absolute;
  top: -10px;
  box-shadow: 0px 22px 0 0 #004990;
}

#first-curve .page-top-icon:before {
  left: -35px;
  border-radius: 0 0 100% 0;
}

#first-curve .page-top-icon:after {
  right: -35px;
  border-radius: 0 0 0 100%;
}

#second-curve {
  background: #30AFE7;
}

#second-curve .page-top-icon {
  position: absolute;
  width: 104px;
  height: 90px;
  margin: 0px auto;
  background: #30AFE7;
  border-radius: 100%;
  color: white;
  text-align: center;
  text-indent: .1em;
  top: -30px;
  left: 50%;
  margin-left: -57px;
  z-index: 10px;
}

#second-curve .page-top-icon:before, #second-curve .page-top-icon:after {
  content: '';
  background: none;
  height: 40px;
  width: 61px;
  position: absolute;
  top: -10px;
  box-shadow: 0px 22px 0 0 #30AFE7;
}

#second-curve .page-top-icon:before {
  left: -35px;
  border-radius: 0 0 100% 0;
}

#second-curve .page-top-icon:after {
  right: -35px;
  border-radius: 0 0 0 100%;
}

#third-curve {
  background: #004990;
}

#third-curve .page-top-icon {
  position: absolute;
  width: 104px;
  height: 90px;
  margin: 0px auto;
  background: #004990;
  border-radius: 100%;
  color: white;
  text-align: center;
  text-indent: .1em;
  top: -30px;
  left: 50%;
  margin-left: -57px;
  z-index: 10px;
}

#third-curve .page-top-icon:before, #third-curve .page-top-icon:after {
  content: '';
  background: none;
  height: 40px;
  width: 61px;
  position: absolute;
  top: -10px;
  box-shadow: 0px 22px 0 0 #004990;
}

#third-curve .page-top-icon:before {
  left: -35px;
  border-radius: 0 0 100% 0;
}

#third-curve .page-top-icon:after {
  right: -35px;
  border-radius: 0 0 0 100%;
}

Comments