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

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.

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

Output:

👁 Image