How to create Non-Rectangular Header using HTML & CSS ? Last Updated : 15 May, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to create a hidden border using CSS properties ? R rahulmahajann Follow Improve Article Tags : CSS HTML-Tags CSS-Properties HTML-Attributes HTML-Questions CSS-Questions +2 More Similar Reads How to Create Header Cell in a Table using HTML? A header cell in a table made with <th> tag is used to label columns or rows, helping organize information. To create a header cell in an HTML table, use the <th> element. Header cells typically contain titles for each column or row, and they are bold by default.Syntax<th> Contents 1 min read How to create a Menu Icon using CSS ? The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c 3 min read How to define header for a document or section using HTML ? The <header> tag in HTML is used to define the header for a document or a section. It contains information related to the title and heading of the related content. The <header> element is intended to usually contain the section’s heading (an h1-h6 element or an <hgroup> element), b 2 min read How to Create a Gradient Shadow using CSS ? A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e 2 min read How to create a hidden border using CSS properties ? In this article, we will learn how to create a hidden border using CSS properties. In the following examples, both inline styling and style definition is used in the head section to define the hidden border. Approach: We will use two headings in which one will show the border color and the other wil 2 min read How to create and style border using CSS ? The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val 4 min read Like