How to create Non-Rectangular Header using HTML & CSS ?
Last Updated :
15 May, 2023
Improve
In this article, we are going to create a Non-Rectangular-header using the basics of HTML and CSS.
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:
