How to make shapes with CSS
Basic shapes with a few lines of CSS
Posted
Updated
Europe’s developer-focused job platform
Let companies apply to you
Developer-focused, salary and tech stack upfront.
Just one profile, no job applications!
How to make shapes with CSS?
You can make all sorts of shapes with CSS. This post is about all different kinds of 2D shapes, you can also make 3D shapes with CSS.
Basic shapes like squares and rectangles are quite easy, and used everywhere on the web. Just add a width and height and you have a square or rectangle (depending on the ratio).
💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.
If you add the CSS property border-radius, you can make these rectangles and squares into circles and ovals.
CSS has many more properties you can use to create shapes. There are the pseudo-elements ::before and ::after. With these two pseudo-elements we can add two more shapes to the already existing ones (square, rectangle, circle, oval).
By combining all these properties (border-radiues, ::before, ::after) with positioning, transforming, rotating, and many others,
we are able make a lot of different shapes in CSS.
Square Shape
.square {
width: 100px;
height: 100px;
background: var(--yellow);
}Rectangle Shape
.rectangle {
width: 200px;
height: 100px;
background: var(--yellow);
}Circle Shape
.circle {
width: 100px;
height: 100px;
background: var(--yellow);
border-radius: 50%;
}Oval Shape
.oval {
width: 200px;
height: 100px;
background: var(--yellow);
border-radius: 200px / 100px;
}Triangle Shape
Triangle Shape - UP
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid var(--yellow);
}Triangle Shape - DOWN
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid var(--yellow);
}Triangle Shape - Left
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid var(--yellow);
border-bottom: 50px solid transparent;
}Triangle Shape - Right
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid var(--yellow);
border-bottom: 50px solid transparent;
}Trapezoid Shape
.trapezoid {
border-bottom: 100px solid var(--yellow);
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
}Parallelogram Shape
.parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background: var(--yellow);
}More Complex Shapes
With adding the pseudo-elements to your CSS repertoire, it is possible to create more complex shapes and|or combine these shapes.
Star (6-points) Shape
.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid var(--yellow);
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid var(--yellow);
position: absolute;
content: '';
top: 30px;
left: -50px;
}Star (5-points) Shape
.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid var(--yellow);
border-left: 100px solid transparent;
transform: rotate(35deg);
}
.star-five:before {
border-bottom: 80px solid var(--yellow);
border-left: 30px solid transparent;
border-right: 30px 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;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid var(--yellow);
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}Curved Tail Arrow
.curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid var(--yellow);
transform: rotate(10deg);
}
.curvedarrow:after {
content: '';
position: absolute;
border: 0 solid transparent;
border-top: 3px solid var(--yellow);
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
transform: rotate(45deg);
}Pentagon Shape
.pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: var(--yellow) transparent;
}
.pentagon:before {
content: '';
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent var(--yellow);
}Heart Shape
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: var(--yellow);
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}Infinity Shape
.infinity {
position: relative;
width: 212px;
height: 100px;
box-sizing: content-box;
}
.infinity:before,
.infinity:after {
content: '';
box-sizing: content-box;
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid var(--yellow);
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
.infinity:after {
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}TL;DR
With basic CSS properties you are already able to create a huge amount of shapes and,
with properties like clip-path even more.
Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.
If you want to know more about CSS, have a look at these CSS Tutorials.
References (and Big thanks):
Newsletter Signup
Never miss an article.
Latest CSS articles:
