Css style

How to create basic and advanced shapes with pure CSS

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

and give it a size and one width.

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:


Square and rectangle in CSS

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.

VIDEO OF THE DAY MAKEUSE

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:


Creating a circle and an ellipse in CSS

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:


Draw a triangle using the border property in CSS

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:


Different triangles using CSS

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:


Start of creation with CSS

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:


Draw a pentagon with CSS

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:


Diamond shape using CSS

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:


Draw a diamond shield using CSS

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:


Draw a heart shape using CSS

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.



Create a responsive navigation bar using HTML and CSS only
How to create a responsive navigation bar using HTML and CSS

Calling all newbie web developers: this tutorial will give you the skills you need to create your own responsive navigation bars using only HTML and CSS!

Read more


About the Author