Creating shapes using CSS is a useful feature in web design that allows designers to create various shapes, including basic shapes like circles and squares and more intricate shapes like stars, clouds, hearts, etc. This tutorial will guide you through creating various shapes, including circles, squares, triangles, clouds, stars, and hearts.
Creating a Circle
To create a circle using CSS, you can use the "border-radius" property and set it to 50%. Doing this will result in the corners of your element being rounded until they form a complete circle. Ensuring that the element's width and height are the same is essential. Here's an example of how you can create a "yellowgreen" circle with a 100-pixel diameter:
/* Creating a Circle */
.circle {
width: 100px; /* Set the width of the circle */
height: 100px; /* Set the height of the circle */
background-color: yellowgreen; /* Set the color of the circle */
border-radius: 50%; /* Makes it a circle by rounding the corners */
}Output:
You can make your circle more visually appealing by adding a border, a shadow, or a gradient. For instance, this code produces a "yellowgreen" circle with a white border and a "darkgreen" shadow.
/* Enhanced Circle with Border and Shadow */
.circle {
width: 100px;
height: 100px;
background-color: yellowgreen;
border: 3px solid white; /* Adds a white border around the circle */
border-radius: 50%;
box-shadow: 0 0 10px darkgreen; /* Adds a shadow in darkgreen color */
}Output:
Creating an Oval
An oval is just a stretched circle. To create an oval shape, you can set the CSS border-radius property to 50%, but ensure the width and height differ. For instance, if you want to create an orchid-colored oval with a width of 200 pixels and a height of 100 pixels, you can use the following code:
/* Creating an Oval */
.oval {
width: 200px; /* Width of the oval */
height: 100px; /* Height of the oval */
background-color: orchid; /* Color of the oval */
border-radius: 50%; /* Rounded corners make it an oval */
}Output:
Creating a Square
To create a square using CSS, set the width and height of your element to the same size. Additionally, you can use the background-color property to fill the square with any color you choose. For instance, the code below creates a coral-colored square with a side length of 100 pixels:
/* Creating a Square */
.square {
width: 100px; /* Width of the square */
height: 100px; /* Height of the square */
background-color: coral; /* Color of the square */
}Output:
You can rotate the square to any angle using the CSS transform property. Here's an example that rotates the square by 45 degrees:
/* Rotated Square */
.square {
width: 100px;
height: 100px;
background-color: stateblue; /* Note: stateblue is not a recognized color. Consider replacing with a hex or rgb value. */
transform: rotate(45deg); /* Rotates the square by 45 degrees */
}Output:
Creating a Triangle
To create a triangle with CSS, use the border property and set three sides to transparent and one to the color you want. The width of the colored border will determine the size of your triangle. You also need to set the width and height of your element to zero. For example, this code will create an upward-pointing orange triangle:
/* Creating an Upward-pointing Triangle */
.triangle {
width: 0; /* Width set to 0 as borders will form the triangle */
height: 0; /* Height set to 0 as borders will form the triangle */
border-left: 50px solid transparent; /* Left border, transparent */
border-right: 50px solid transparent; /* Right border, transparent */
border-bottom: 100px solid orange; /* Bottom border, forming the triangle */
}Output:
You can change the orientation of your triangle by selecting which border to color and which to leave transparent. For instance, this code will produce a purple triangle pointing downwards:
/* Triangle Pointing Downwards */
.downward-triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* Left border size and transparency */
border-right: 50px solid transparent; /* Right border size and transparency */
border-top: 100px solid red; /* Top border size and color */
}Output:
You can also use the CSS transform: skew() property to create triangles with different angles. For instance, the following code will generate a triangle that is skewed to the left:
/* Triangle Skewed to the Left using skew() */
.triangle-skewed {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid orange;
transform: skew(-20deg); /* This skews the triangle to the left */
}Output:
Creating a Bolt Shape
To create a bolt shape with CSS, we will use a combination of the border property and the ::before pseudo-element. The ::before pseudo-element allows us to generate content before an element, which we can use to create the zigzag pattern of the bolt. The following code shows how to create a bolt shape:
/* Creating a Bolt Shape */
.bolt {
position: absolute;
left: 35%; top: 40%;
border-width: 4.5rem .75rem 0; /* Top border creates the bolt shape */
transform: skew(-30deg); /* Skews the shape for desired look */
}
.bolt,
.bolt::before {
height: 0; width: 0;
border-style: solid;
border-color: #eee transparent;
}
.bolt::before {
content: "";
position: absolute;
left: -1.35rem; top: -6rem;
border-width: 2rem .5rem .5rem .75rem;
transform: skew(5deg); /* Skews the pseudo-element to complement the main shape */
}Output:
Creating a Cloud Shape
To create a cloud shape with CSS, we will use three pseudo-elements: the ::before pseudo-element to make the top and bottom of the cloud, and the ::after pseudo-element to create the tail of the cloud. The following code shows how to create a cloud shape:
/* Creating a Cloud Shape */
.cloud,
.cloud::before,
.cloud::after {
position: absolute;
height: 2.5rem;
width: 3.5rem;
background: #eee;
}
.cloud {
height: 4rem;
width: 4rem;
top: 50%; left: 50%;
border-radius: 50% 50% 0 0; /* Semi-circle shape */
box-shadow: inset -3px 1px 0 rgba(0, 0, 0, .2); /* Inner shadow for depth */
transform: translate(-50%, -50%); /* Center the cloud */
}
.cloud::before {
content: '';
top: 40%; left: -35%;
border-radius: 50% 0 0 50%; /* Quarter-circle shape */
}
.cloud::after {
content: '';
top: 40%; left: 50%;
border-radius: 50% 50% 50% 0; /* Another quarter-circle shape */
box-shadow: inset -3px 1px 0 rgba(0, 0, 0, .2); /* Inner shadow for depth */
}Output:
Creating a Star Shape
This CSS code creates a five-pointed star using overlapping triangles generated by the main .star class and pseudo-elements .star:before and .star:after. The font-size and border properties determine the star's size and color, while its position and rotation are controlled by the position, top, left, and transform properties.
/* Creating a Star Shape */
.star {
position: relative;
display: inline-block; /* Allows for block properties but flow inline */
width: 0; height: 0; /* Collapses the main element to use borders for shape */
margin-left: 0.9em; margin-right: 0.9em; margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #FC0; /* Base triangle of the star */
border-left: 0.3em solid transparent;
font-size: 3rem; /* Determines scale */
}
.star:before,
.star:after {
content: "";
display: block;
width: 0; height: 0; /* Use borders to form the triangles */
position: absolute;
top: 0.6em; left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid #FC0;
border-left: 1em solid transparent;
}
.star:after {
transform: rotate(35deg); /* Rotates the after triangle to position it */
}
.star:before {
transform: rotate(-35deg); /* Rotates the before triangle to position it */
}Output:
Creating a Beating Red Heart
To create a beating red heart with CSS, you can use two circles and a square that are positioned and rotated to form the shape of a heart. You can then use the animation property to make the heart appear to beat. For example, the following code will create a read heart that also beats:
/* Creating a Beating Red Heart */
.heart {
width: 50px;
height: 50px;
position: relative; /* Allows for the positioning of pseudo-elements */
background-color: red;
transform: rotate(45deg) scale(1); /* Initial transform state */
animation: Beat 2s ease infinite alternate; /* Animation to make the heart "beat" */
margin: 25px;
}
.heart:after,
.heart:before {
content: '';
position: absolute;
background-color: red;
border-radius: 100%; /* Makes it a circle */
width: 50px;
height: 50px;
}
.heart:before {
left: -25px; /* Positions the left circle to the left */
}
.heart:after {
top: -25px; /* Positions the top circle above */
}
@keyframes Beat {
0%, 100% {
transform: rotate(45deg) scale(1.2); /* Scale to 120% for the beat effect */
}
40% {
transform: rotate(45deg) scale(1); /* Return to the original size */
}
}Output:
Creating a Red Heart Shape with a Shadow in CSS
You can also draw the heart shape differently and add some effects, such as a shadow. For example, this code will create a red heart with a shadow:
/* Heart Shape with Shadow */
.heart {
position: relative; /* Relative positioning for pseudo-elements */
width: 100px;
height: 80px;
}
.heart:before,
.heart:after {
position: absolute; /* Absolute positioning relative to the heart */
content: ""; /* Necessary for pseudo-elements */
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red; /* Color of the heart */
border-radius: 50px 50px 0 0; /* Rounded corners for heart lobes */
box-shadow: 10px 5px 5px -5px rgb(0 0 0 / 25%); /* Shadow for depth */
}
.heart:after {
left: 0;
transform: rotate(45deg); /* Rotate the right lobe of the heart */
transform-origin: 100% 100%; /* Sets the point around which the lobe is rotated */
}Output:
Conclusion
In this tutorial, you learned how to create different shapes with CSS, such as circles, squares, triangles, stars, and hearts. You also learned some tips and tricks to make your shapes more attractive and responsive. These shapes can enhance your web design and draw your users' attention.
