Skip to content
Related Articles

Related Articles

Improve Article

How to create Non-Rectangular Header using HTML & CSS ?

  • Difficulty Level : Medium
  • Last Updated : 25 Mar, 2021

In this article, we are going to create a Non-Rectangular-header using the basics of HTML and CSS.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Approach:

  • Create a header using <header> tag.
  • Create a div for adding the content for the header.
  • Use clip-path() function to give a particular shape to the header.

HTML Code:



  • Create an HTML file (index.html).
  • Link the CSS file that provides all the animation’s effect on HTML. The CSS file is linked inside the head section of the webpage.
  • Coming to the body section of our HTML code.
    • Create a header tag.
    • Create a div tag and assign the class to it.
    • Add a heading and paragraph to that particular div.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <header>
        <div class="main_box">
            <h1>Geeks For Geeks</h1>
            <p>A computer science portal for geeks</p>
        </div>
    </header>
</body>
  
</html>

CSS Code: The following code added inside “style.css” file and used in the HTML code. CSS is used to give different types of animations and effects to HTML page so that it is interactive to all users.

  • Restore all the browser effects.
  • Use classes and ids to give effects to HTML elements.
  • Use CSS clip-path() function to give a particular shape to the header.

style.css




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: #000;
}
  
header{
    height: 65vh;
    background-color: rgb(37, 142, 8);
    clip-path:
    polygon(0 0, 100% 0, 100% 50vh, 
        80% 60vh, 60% 50vh, 40% 60vh, 
        20% 50vh, 0 60vh);
    border-radius: 10em;
}
  
.main_box{
    position: absolute;
    top: 25%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
}
  
h1{
    font-size: 3.85em;
    margin: 0.25em;
}
  
p{
    font-size: 2em;
}

Combining the above two sections (HTML and CSS) of codes and run it on the browser.

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :