Open In App

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

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

Image

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 effects 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.

Example: Here we are Implementing the above-explained method.

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>

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

Output:

Image


R

rahulmahajann
Improve
Article Tags :

Explore

Lightbox