Examples of Creating Shapes Using CSS
1. Creating a square:
The square is one of the simplest shapes to create with CSS. Here’s an example of how to create a square:
<!-- Write HTML code here -->
<!DOCTYPE html>
<html>
<head>
<style>
.square {
height: 50px;
width: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Output:
2. Creating Triangle:
Triangles can also be created with CSS. Here’s an example of how to create an upward triangle:
<!-- Write HTML code here -->
<!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:
By mastering the creation of these shapes with CSS, you can enhance the visual appeal and interactivity of your website.
How to Create Shapes using CSS ?
CSS shapes refer to the geometric shapes that can be created and styled using CSS properties. CSS is a powerful tool that allows web developers to create a variety of shapes using simple CSS properties. From simple squares and circles to complex polygons, CSS provides the tools necessary to design visually appealing elements that can enhance user interaction and overall experience. This article will guide you through the process of creating different shapes using CSS.