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 Make a Shape Like On Image in Pure CSS?
Creating custom shapes in CSS allows you to break free from the traditional rectangular box model. You can use the CSS clip-path property along with various shape functions to create visually appealing designs that clip portions of elements to form different shapes.
Syntax
selector {
clip-path: shape-function(parameters);
}
Using Border Radius for Organic Shapes
You can create irregular shapes by applying different border radius values to each corner of an element
<!DOCTYPE html>
<html>
<head>
<style>
.organic-shape {
width: 300px;
height: 200px;
background-color: #3498db;
border: 4px solid #2c3e50;
border-top-left-radius: 25% 30%;
border-bottom-left-radius: 40% 10%;
border-top-right-radius: 30% 25%;
border-bottom-right-radius: 70% 85%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div class="organic-shape">Organic Shape</div>
</body>
</html>
A blue container with irregular, organic-looking rounded corners and white text "Organic Shape" appears on the page.
Using polygon() Function
The polygon() function allows you to define custom shapes by specifying coordinate points. You can create complex geometric shapes by setting multiple coordinates
<!DOCTYPE html>
<html>
<head>
<style>
.star-shape {
width: 200px;
height: 200px;
background-color: #e74c3c;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
margin: 20px;
}
</style>
</head>
<body>
<div class="star-shape"></div>
</body>
</html>
A red star shape created using polygon clipping appears on the page.
Using ellipse() Function
The ellipse() function creates oval shapes by specifying horizontal and vertical radii along with the center position
<!DOCTYPE html>
<html>
<head>
<style>
.ellipse-shape {
width: 250px;
height: 150px;
background-color: #9b59b6;
clip-path: ellipse(100px 60px at center);
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="ellipse-shape">Ellipse</div>
</body>
</html>
A purple elliptical shape with white text "Ellipse" centered inside appears on the page.
Using circle() Function
The circle() function creates perfect circular shapes by specifying a radius and center position
<!DOCTYPE html>
<html>
<head>
<style>
.circle-shape {
width: 200px;
height: 200px;
background-color: #f39c12;
clip-path: circle(80px at center);
margin: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="circle-shape">Circle</div>
</body>
</html>
An orange circular shape with white text "Circle" centered inside appears on the page.
Conclusion
CSS clip-path property provides powerful tools for creating custom shapes beyond the traditional rectangular box model. Whether using polygon(), ellipse(), circle(), or creative border-radius combinations, you can design visually appealing elements that enhance your web page aesthetics.
1K+ Views
