Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a Non-Rectangular Header using HTML & CSS
A non-rectangular header adds visual appeal to web pages by breaking away from traditional rectangular layouts. Using CSS's clip-path property, we can create custom shapes for headers that make our designs stand out.
Syntax
header {
clip-path: polygon(coordinates);
}
Basic Approach
To create a non-rectangular header, we use the following steps
Create a
<header>element with contentApply the
clip-pathCSS property with polygon coordinatesPosition content appropriately within the clipped area
Example 1: Wavy Bottom Header
Here's how to create a header with a wavy bottom edge
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wavy Header</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
}
header {
height: 250px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
clip-path: polygon(
0 0,
100% 0,
100% 70%,
80% 85%,
60% 70%,
40% 85%,
20% 70%,
0 85%
);
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.content {
text-align: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 0.5em;
}
p {
font-size: 1.2em;
}
</style>
</head>
<body>
<header>
<div class="content">
<h1>Welcome to Our Site</h1>
<p>Beautiful Non-Rectangular Header</p>
</div>
</header>
</body>
</html>
A purple gradient header with wavy bottom edges appears, containing centered white text "Welcome to Our Site" and subtitle.
Example 2: Diagonal Cut Header
Creating a header with diagonal bottom edge
<!DOCTYPE html>
<html lang="en">
<head>
<title>Diagonal Header</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ecf0f1;
}
header {
height: 300px;
background: linear-gradient(45deg, #1e3c72, #2a5298);
clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
position: relative;
}
.header-content {
position: absolute;
top: 40%;
left: 5%;
color: white;
}
h1 {
font-size: 3em;
font-weight: bold;
margin-bottom: 0.5em;
}
p {
font-size: 1.4em;
max-width: 600px;
}
</style>
</head>
<body>
<header>
<div class="header-content">
<h1>Modern Design</h1>
<p>Clean diagonal cut creates a professional look</p>
</div>
</header>
</body>
</html>
A blue gradient header with a diagonal bottom cut appears, with white text positioned on the left side.
Key Properties Explained
| Property | Purpose |
|---|---|
clip-path: polygon() |
Defines the clipping region using coordinates |
height |
Sets the header height before clipping |
position: absolute/relative |
Positions content within the clipped area |
Tips for Polygon Coordinates
Coordinates are in percentages (0% to 100%)
Start from top-left and work clockwise
Use online clip-path generators for complex shapes
Test on different screen sizes for responsiveness
Conclusion
Non-rectangular headers using clip-path provide an easy way to create modern, visually appealing designs. The polygon function offers flexibility to create various shapes from simple diagonal cuts to complex wavy patterns.
588 Views
