Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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


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


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

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


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 15 May, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials