DEV Community

loading...

How to make shapes with CSS

Mario
Software Engineer from Vienna, Austria. Building things, mainly in JavaScript.
Originally published at mariokandut.com on ・16 min read

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).

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);
}
Enter fullscreen mode Exit fullscreen mode

Rectangle Shape

.rectangle {
  width: 200px;
  height: 100px;
  background: var(--yellow);
}
Enter fullscreen mode Exit fullscreen mode

Circle Shape

.circle {
  width: 100px;
  height: 100px;
  background: var(--yellow);
  border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Oval Shape

.oval {
  width: 200px;
  height: 100px;
  background: var(--yellow);
  border-radius: 200px / 100px;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Trapezoid Shape

.trapezoid {
  border-bottom: 100px solid var(--yellow);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Parallelogram Shape

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background: var(--yellow);
}
Enter fullscreen mode Exit fullscreen mode

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.

💰: Start your cloud journey with $100 in free credits with DigitalOcean!

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;
margin-bottom: 2rem;
}
.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-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;
}
Enter fullscreen mode Exit fullscreen mode

Star (5-points) Shape

.star-five {
margin: 4rem 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: '';
}

.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: '';
}
Enter fullscreen mode Exit fullscreen mode

Curved Tail Arrow

.curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 2rem solid transparent;
border-right: 2rem solid var(--yellow);
transform: rotate(10deg);
}
.curvedarrow:after {
content: '';
position: absolute;
border: 0 solid transparent;
border-top: 0.5rem solid var(--yellow);
border-radius: 1.5rem 0 0 0;
top: -2rem;
left: -1rem;
width: 2rem;
height: 2rem;
transform: rotate(45deg);
}

.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);
}
Enter fullscreen mode Exit fullscreen mode

Pentagon Shape

.pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: var(--yellow) transparent;
margin-top: 3rem;
}
.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);
}

.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);
}
Enter fullscreen mode Exit fullscreen mode

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%;
}

.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%;
}
Enter fullscreen mode Exit fullscreen mode

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);
}

.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);
}
Enter fullscreen mode Exit fullscreen mode

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 Gatsby Tutorials.

References (and Big thanks):

CSS Tricks, A List Apart, CSS Shapes Resources

Discussion (0)