The Beginner’s guide to CSS Illustrations — Part 1

Learn how to create basic shapes

Author: Ossian

Square

.square {
background-color: dodgerblue;
height: 200px;
width: 200px;
}

Rectangle

.rectangle {
background-color: dodgerblue;
height: 125px;
width: 200px;
}

Circle

.circle {
background-color: dodgerblue;
height: 200px;
width: 200px;
border-radius: 50%;
}

Ellipse

.ellipse {
background-color: dodgerblue;
height: 125px;
width: 200px;
border-radius: 50%;
}

Pill

.pill {
background-color: dodgerblue;
height: 100px;
width: 200px;
border-radius: 50000px; /*Any large value will do the trick*/
}

Egg

.egg {
height: 200px;
width: 150px;
background-color: dodgerblue;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Triangle

.triangle {
height: 0px;
width: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 173px solid dodgerblue;
}

Trapezium

.trapezium {
height: 0px;
width: 150px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 150px solid dodgerblue;
}

Parallelogram

.parallelogram {
height: 125px;
width: 200px;
background-color: dodgerblue;
transform: skew(-20deg);
}

Part-2

Resources

  • Visit this codepen for more shapes like pentagon, hexagon, heart, infinity, etc.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shounak Das

I am a passionate programmer and tech-geek. I love to code, and teach coding to beginners.