Mario

Posted on Feb 11, 2021 • Originally published at mariokandut.com on Feb 7, 2021

How to make shapes with CSS

#css #scss #sass

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

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.

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

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

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

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

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

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

DEV Community