Creating Shapes Using CSS : A Beginner's Guide

Prajwal Jadhav April 19, 2024

Creating Shapes Using CSS

Creating Shapes Using CSS : A Beginner's Guide

CSS allows web developers to create a various shapes using simple CSS properties, Also provides the necessary tools to design visually appealing elements and improve user interaction and overall experience.

In this blog post, we'll see how to create various shape using CSS. lets get started! 

Rectangle

.rectangle {
width: 400px;
height: 200px;
background-color: #098889;
}

Square

.square {
width: 300px;
height: 300px;
background-color: #098889;
}

Circle

.circle {
width: 300px;
aspect-ratio: 1;
background: black;
border-radius: 50%;
}

Ellipse

.ellipse {
width: 300px;
height: 400px;
background: black;
border-radius: 50%;
}

Oval

.oval {
width: 300px;
height: 400px;
background: black;
border-radius: 100% / 120% 120% 75% 75%;
}

Arch

.arch {
width: 300px;
height: 400px;
background: black;
border-radius: 50% / 100% 100% 0% 0%;
}

Triangle

.triangle {
width: 300px;
height: 300px;
background: black;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

Octagon

.octagon {
width: 300px;
height: 300px;
background: black;
clip-path: polygon(16.6% 16.6%, 50% 8%, 83.3% 16.6%, 100% 50%, 83.3% 83.3%, 50% 100%, 16.6% 83.3%, 0% 50%);
}

Spark

.spark {
width: 300px;
aspect-ratio: 1;
background: #d98889;
clip-path: polygon(40% 40%, 50% 0, 60% 46%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 50% 50%);
}

Conclusion 

At the end, by using these CSS Code snippets you can add shapes to your website, and make it effective. Dont forget to experiment with properties, values and colors to enhance your skills. Happy coding! 
Tags: