How to create Non-Rectangular Header using HTML & CSS ? Last Updated : 15 May, 2023 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. 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 Non-Rectangular Header using HTML & CSS ? R rahulmahajann Follow Improve Article Tags : Web Technologies HTML CSS HTML-Tags CSS-Properties HTML-Attributes HTML-Questions CSS-Questions +4 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 Shrink Header on Scroll using HTML, CSS and JavaScript ? The Shrink Navigation bar works when the user scrolls down the page. In this article, we will use HTML, CSS, and JavaScript to design a shrink navigation bar. HTML is used to create the structure, and CSS is used to set the style of the HTML structure to make it looks good. This kind of shrinking na 3 min read How to create linear gradient text using HTML and CSS ? The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide 2 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 the tabular layout using CSS Property ? Tabular layouts are a common requirement for web developers when designing websites. Traditionally, tables were used to create these layouts, but with the advent of CSS, developers now can use more modern approaches like flexbox and grid. This article will discuss how to create tabular layouts using 4 min read How to Create Avatar Images using HTML and CSS ? This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites. Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radiu 1 min read How to Draw a Semi-Circle using HTML and CSS ? To draw a semi-circle using HTML and CSS, Use the 'border-radius' property in combination with a square-shaped container div. Set border-radius to create a circular shape, and then use additional CSS to clip one half, forming a semi-circle. Approach:First create a HTML structure, specifying language 1 min read How to Create Badges using HTML and CSS ? This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that 2 min read Like