How to Make Curved Header using Html and CSS | CSS Tricks

How to Make Curved Header using Html and CSS | CSS Tricks
How to Make Curved Header using Html and CSS | CSS Tricks

If We are web developer then its is very important to create simple and beautiful website, then our websites header must be unique and different, in this order today we will learn how to create beautiful curved header using html and css.

<style type="text/css">
  body
  {
	  margin:0px;
	  padding:0px;
	  font-family:Verdana, Geneva, sans-serif;
  }
  
  section:before
  {
	  content:'';
	  position:absolute;
	  top:0;
	  left:0;
	  width:100%;
	  height:100%;
	  background:linear-gradient(45deg,#ff0081,#6827b0);
	  border-radius:0 0 50% 50%/0 0 100% 100%;
	  transform:scaleX(1.2);
	  
  }
  
  section
  {
	  position:relative;
	  width:100%;
	  height:30vh;
	  display:flex;
	  justify-content:center;
	  align-items:center;
	  overflow:hidden;
  }
  
  section .content
  {
	  position:relative;
	  z-index:1;
	  margin:0 auto;
	  max-width:900px;
	  text-align:center;
  }
  
  section .content h2
  {
	  font-size:40px;
	  color:#fff;
  }
  
</style>
<section>
    <div class="content">
      <h2>How To Create Curved Header</h2>
    </div>
  </section>

How To Create Curved Header



Kansas City Airport Shuttle

Kansas City Airport Shuttle is the premier Airport Transportation service in Kansas City. Kansas City Airport Car Service provides Kansas City travelers transportation to and from Kansas City International Airport, Lawrence, Topeka, Manhattan, Fort Riley, and Junction City Kansas.

Leave a Reply

avatar
  Subscribe  
Notify of