Have you ever seen a pure CSS website where every element is finished via CSS? CSS does more than just stylize elements. CSS shapes allow web designers to create custom paths like triangle, circles, polygons, etc. This way, you no longer have to insert a floating image with a transparent background, only to be disappointed with a rectangular frame around it.
In this article, we’ll be using CSS shapes and some functional values to code different shapes.
Draw basic CSS shapes
Let’s start with the basic shapes like square, rectangle, triangle, circle, and ellipse.
Square and rectangle
Square and rectangle are the easiest shapes to create in CSS. All you have to do is create a
Html
CSS
.rec-sq {
display: flex;
gap: 2em;
margin: 2em;
}
.square {
width: 15rem;
height: 15rem;
background: rgb(255, 123, 0);
}
.rectangle {
width: 24rem;
height: 14rem;
background: rgb(0, 119, 128);
}
To go out:
Circle and Ellipse
All you need to do is assign a border radius 50% to a square and you will get a circle. Do the same with the rectangle to get an ellipse.
Html
CSS
.circle {
width: 15rem;
height: 15rem;
background: rgb(255, 123, 0);
border-radius: 50%;
}
.ellipse {
width: 24rem;
height: 14rem;
background: rgb(0, 119, 128);
border-radius: 50%;
}
To go out:
Triangles
We will use borders to create triangles. Are you wondering how it works? All you have to do is set the width and size from triangle to zero. This means, going forward, the actual width of the element will be the border width. Also, you may already know that the edges of the border are 45 degrees diagonal to each other. Give each border different colors and set three of them to transparent. Ultimately, you will have your triangle.
Html
CSS
//common to all
body {
display: flex;
gap: 5em;
margin: 15em;
}.sample {
height: 8.5em;
width: 8.5em;
border-top: 1em solid #9ee780;
border-right: 1em solid rgb(240, 241, 141);
border-bottom: 1em solid rgb(145, 236, 252);
border-left: 1em solid rgb(248, 115, 106);
}.triangle {
height: 0;
width: 0;
border-top: 5em solid #9ee780;
border-right: 5em solid rgb(240, 241, 141);
border-bottom: 5em solid rgb(145, 236, 252);
border-left: 5em solid rgb(248, 115, 106);
}
To go out:
You can play with size and border color to get different types of triangles. For example, you can create an upward pointing triangle by giving the Bottom border a solid color while all other borders are set to transparent. In addition, you can create a triangle pointing in the right direction or a right triangle by playing with it. border width and border color.
Html
CSS
.triangle-up {
height: 0;
width: 0;
border-top: 5em solid transparent;
border-right: 5em solid transparent;
border-bottom: 5em solid rgb(145, 236, 252);
border-left: 5em solid transparent;
}
.triangle-right {
width: 0;
height: 0;
border-style: solid;
border-width: 4em 0 4em 8em;
border-color: transparent transparent transparent rgb(245, 149, 221);
}
.triangle-bottom-right {
width: 0;
height: 0;
border-style: solid;
border-width: 8em 0 0 8em;
border-color: transparent transparent transparent rgb(151, 235, 158);
}
To go out:
Creating advanced shapes using CSS
You can use ::before and ::after pseudo-elements to create advanced shapes. With the smart use of position and transform properties, you can easily create complex shapes using pure CSS.
Star shape (5 points)
You will need to manipulate the borders using the transform’s rotation value. The idea is to create two sides using a class = “star”, the other two sides using the ::after element, and the last side using the ::before element.
Html
CSS
.star-five {
margin: 3.125em 0;
position: relative;
display: block;
width: 0em;
height: 0em;
border-right: 6.25em solid transparent;
border-bottom: 4.3em solid rgb(255, 174, 81);
border-left: 6.25em solid transparent;
transform: rotate(35deg);
}
.star-five:before {
border-bottom: 5em solid rgb(255, 174, 81);
border-left: 2em solid transparent;
border-right: 1.875em solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star-five:after {
position: absolute;
display: block;
top: 3px;
left: -105px;
width: 0;
height: 0;
border-right: 6.25em solid transparent;
border-bottom: 4.3em solid rgb(255, 174, 81);
border-left: 5.95em solid transparent;
transform: rotate(-70deg);
content: '';
}
To go out:
Pentagon
You can create a pentagon by combining a trapezoid and a triangle. Use frontier and position properties, format and group them.
Html
CSS
.pentagon {
position: relative;
width: 10em;
box-sizing: content-box;
border-width: 10em 5em 0;
border-style: solid;
border-color: rgb(7, 185, 255) transparent;margin-top: 20rem;
margin-left: 10rem;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -18em;
left: -5em;
border-width: 0 10em 8em;
border-style: solid;
border-color: transparent transparent rgb(7, 185, 255);
}
To go out:
diamond
Group two triangles pointing up and down using position to create a diamond shape. Yes, we will use the frontier properties to create these triangles.
Html
CSS
.diamond {
width: 0;
height: 0;
position: relative;
top: -3em;
border: 3em solid transparent;
border-bottom-color: rgb(129, 230, 255);}
.diamond:after {
content: '';
width: 0;
height: 0;
position: absolute;
left: -3em;
top: 3em;
border: 3em solid transparent;
border-top-color: rgb(129, 230, 255);
}
To go out:
You can create a diamond shield shape by changing the height of the top triangle as shown below:
Html
CSS
.diamond-shield
{
width: 0;
height: 0;
border: 3em solid transparent;
border-bottom: 1.25em solid rgb(71, 194, 231);
position: relative;
top: -3em;
}
.diamond-cut:after {
content: '';
position: absolute;
left: -3em;
top: 1.25em;
width: 0;
height: 0;
border: 3em solid transparent;
border-top: 4.4em solid rgb(71, 194, 231);
}
To go out:
Heart
The shape of the heart is a bit hard but you can do it by using ::before and ::after pseudo-elements. You can use different values of transform to rotate them at different angles until they perfectly form a heart shape. Ultimately, you can define transform-origin to define the point around which the transformation is applied.
Html
CSS
.heart {
width: 6.25em;
height: 55em;
position: relative;
}
.heart:before,
.heart:after {
content: "";
width: 3em;
height: 5em;
position: absolute;
left: 3em;
top: 0;
background: red;
border-radius: 3em 3em 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
To go out:
Experiment with pure CSS shapes
You should now be familiar with the various pure CSS images that can be built by writing a few lines of code. Building a super fast website is no longer a hectic task because you know how to play with the code. The best part is that you can resonate with the brand’s voice by manipulating different shapes and colors as you need. Therefore, keep experimenting and discover new ways to draw awesome shapes just by CSS.
Read more
About the Author
