How to create shapes using CSS ?
In this article, we will design some different types of shapes using CSS. CSS is capable of making all types of shapes.
html
<!DOCTYPE html>
<html>
<head>
<style>
.square {
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
|
Output:
html
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
|
Output:
html
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid green;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
|
Output:
html
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
height: 70px;
width: 70px;
background-color: green;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
|
Output:
html
<!DOCTYPE html>
<html>
<head>
<style>
.rectangle {
height: 50px;
width: 80px;
background-color: green;
}
</style>
</head>
<body>
<div class="rectangle"></div>
</body>
</html>
|
Output:
- Creating a parallelogram:
html
<!DOCTYPE html>
<html>
<head>
<style>
.parallelogram {
width: 120px;
height: 60px;
transform: skew(24deg);
background: green;
}
</style>
</head>
<body>
<div class="parallelogram"></div>
</body>
</html>
|
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.oval {
height: 200px;
width: 400px;
border-radius: 50%;
background-color: green;
}
</style>
</head>
<body>
<div class="oval"></div>
</body>
</html>
|
Last Updated :
21 Jun, 2021
Like Article
Save Article