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 different shapes with CSS?
CSS allows you to create various geometric shapes on web pages using properties like border-radius, border, and clip-path. These properties can transform simple HTML elements into circles, rectangles, squares, triangles, and more complex shapes.
Syntax
/* Basic shape properties */ border-radius: value; border: width style color; clip-path: shape-function;
Create a Circle
A circle is created by setting border-radius to 50% on a square element −
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
background: rgb(0, 255, 13);
border: 3px solid rgb(27, 0, 78);
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Create a Circle</h1>
<div class="circle"></div>
</body>
</html>
A green circle with a dark purple border appears on the page.
Create a Rectangle
A rectangle is created by setting different width and height values with a border −
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
width: 200px;
height: 100px;
background: rgb(255, 232, 21);
border: 3px solid rgb(42, 0, 70);
}
</style>
</head>
<body>
<h1>Create a Rectangle</h1>
<div class="rectangle"></div>
</body>
</html>
A yellow rectangle with a dark purple border appears on the page.
Create a Square
A square is created by setting equal width and height values −
<!DOCTYPE html>
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background: rgb(23, 153, 121);
border: 3px solid darkblue;
}
</style>
</head>
<body>
<h1>Create a Square</h1>
<div class="square"></div>
</body>
</html>
A teal square with a dark blue border appears on the page.
Create a Triangle
A triangle is created using the clip-path property with the polygon() function. The coordinates define the triangle's vertices −
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
margin: 50px auto;
}
</style>
</head>
<body>
<h1>Create a Triangle</h1>
<div class="triangle"></div>
</body>
</html>
A colorful triangle with a gradient background appears on the page, pointing upward.
Conclusion
CSS provides powerful tools to create geometric shapes using properties like border-radius for circles, dimension properties for rectangles and squares, and clip-path for complex shapes like triangles. These techniques enable creative design possibilities without requiring images.
464 Views
