Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a Non-Rectangular Header using HTML & CSS
Hyper Text Markup Language is referred to as HTML. It is used for building Web pages; it explains how a Web page is put together. There are several components to it. The components in it instruct the browser on how to render the material.
Cascading style sheets, or CSS, define how HTML components should appear in various print and digital media, including displays and other print and digital forms. The use of CSS saves a lot of time. It can control the design of several web pages at once. In this article, we will learn about how to create a non-rectangular header using HTML and CSS.
Basic HTML Document
First, let’s look at a basic HTML document −
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
If we look at the above example, we see different terms like DOCTYPE, HTML, head, body, h1, and p these are called HTML elements these elements can be defined by a starting tag, some content, and a closing tag so let’s understand the elements used in above example one by one −
<!DOCTYPE html> this element defines that the document is an HTML5 document.
<html> this is known as the root element of the HTML page, or we can say that a complete HTML document is written inside this tag.
<head> all the meta-information about the HTML page is written inside this tag
<title> it is used to specify the title for the HTML page, which is written on the browser tab.
<body> is defined as the body of the HTML page, all the content like heading, paragraph, images, hyperlinks, table, list, etc.
<h1> is used to write the large heading.
<p> is used to define a paragraph.
Approach
Use <header> tag for creating a header.
For adding content in the header, we will use a div.
Then we will use the clip-path() function for giving a shape to the header.
HTML Code
Creating an HTML file
Link the CSS file in the head section using link tag which will contain all the necessary animation and styling for the header.
Then inside the body section of our HTML page −
Use <header> to create header
Creating a div and assigning a class to it.
Add content to the div that can be a heading or a paragraph.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="main_box">
<h1>HELLO, WORLD!</h1>
<p>How to create a Non-Rectangular Header using HTML & CSS</p>
</div>
</header>
</body>
</html>
We started by describing the type of HTML page.
Inside the <html> </html> tag, we used the <head> tag and <body> tag.
The head tag contains the title of the page “document” and a link to the CSS style sheet is “style.css”
The body contains a header which further contains a div tag having a class “main_box”
Div is containing the heading “HELLO, WORLD!” and a paragraph “How to create a Non-Rectangular Header using HTML & CSS”.
CSS Code
In the "style.css" file, the following code was added and utilized. To make an HTML page interactive for all viewers, CSS is used to add various animations and effects.
Bring back all browser effects.
To impart effects to HTML components, use classes and ids.
Use the CSS clip-path() technique to give the header a certain shape.
Style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: peachpuff;
}
header {
height: 65vh;
background-color: black;
clip-path: polygon(
0 0,
100% 0,
100% 50vh,
80% 60vh,
60% 50vh,
40% 60vh,
20% 50vh,
0 60vh
);
border-radius: 10em;
}
.main_box {
position: absolute;
top: 25%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
h1 {
font-size: 3.85em;
margin: 0.25em;
color: yellow;
}
p {
font-size: 2em;
color: blue;
}
Inside the * which is a universal selector we are applying margin as 0, padding as 0, and box-sizing as border-box
And for the body we have given it the background-color green.
And to the header we have given it a height of 65vh, and a background color of black, then we used a clip-path polygon so that the header is non-rectangular in shape, and after that, we gave it a border radius of 10em.
Then to the main_box which is a class linked to the div we have given it the position: absolute; top: 25%; left: 50%; text-align: center; transform: translate(- 50%, -50%);
The heading is given a font size of 3.85em, margin of 0.25, and color yellow.
And in the end styling given to the paragraph is a font size of 2em and color red.
After combining both the code that is HTML and CSS, we get the output something like −
Example
Following is the complete example of the above –
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: peachpuff;
}
header {
height: 65vh;
background-color: black;
clip-path: polygon(0 0,
100% 0,
100% 50vh,
80% 60vh,
60% 50vh,
40% 60vh,
20% 50vh,
0 60vh);
border-radius: 10em;
}
.main_box {
position: absolute;
top: 25%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}
h1 {
font-size: 3.85em;
margin: 0.25em;
color: yellow;
}
p {
font-size: 2em;
color: blue;
}
</style>
<body>
<header>
<div class="main_box">
<h1>HELLO, WORLD!</h1>
<p>How to create a Non-Rectangular Header using HTML & CSS</p>
</div>
</header>
</body>
</html>
Conclusion
In this article, we saw what HTML and CSS are and how we can create a non-rectangular header using the basics of HTML and CSS we also learned about different CSS properties and various HTML tags that helped us to create a non-rectangular header and one of the major function that was used to achieve it was clip-path().
347 Views
