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

Leave a Reply

Your email address will not be published. Required fields are marked *