Open in app

Sign up

Sign in

Write

Sign up

Sign in

Creating Basic and Advanced Shapes in CSS

CSS gives us the opportunity to create multiple Shapes.

Albert Walicki
Level Up Coding

--

Making various shapes in CSS is easy. Squares and rectangles are the most common and natural shapes in web development. You need to add width and height, and that’s it. Then add border-radius and you have circles and ovals.

More complex shapes require using :before and :after pseudo-elements or more HTML. That gives us two more shapes to create something complex. In terms of creating different shapes, your best friends will be transform and position.

Most of the shapes below designers would export as an image, but as we know — we should replace simple images with CSS to speed up our website.

Keep in mind: all shapes were built with box-sizing: border-box; on the body!

Let’s start with basic shapes.

Square shape

<div class="square"></div>.square {
  width: 80px;
  height: 80px;
  background: orange;
}
Square

Rectangle shape

<div class="rectangle"></div>.rectangle {
  width: 200px;
  height: 80px;
  background: orange;
}
Rectangle

Circle shape

<div class="circle"></div>Elipse shape.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: orange;
}
Circle

Elipse shape

<div class="elipse"></div>.elipse {
  width: 160px;
  height: 80px;
  border-radius: 50%;
  background: orange;
}
Elipse

Isosceles triangle shape

<div class="isosceles_triangle"></div>.isosceles_triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent orange transparent;
}
Isosceles triangle

Triangle up shape

<div class="triangle_up"></div>.triangle_up {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 86.6px 50px;
  border-color: transparent transparent orange transparent;
}
Triangle up

Triangle down shape

<div class="triangle_down"></div>.triangle_down {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 86.6px 50px 0 50px;
  border-color: orange transparent transparent transparent;
}
Triangle down

Triangle left shape

<div class="triangle_left"></div>.triangle_left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 86.6px 50px 0;
  border-color: transparent orange transparent transparent;
}
Triangle left

Triangle right shape

<div class="triangle_right"></div>.triangle_right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent orange;
}
Triangle right

Triangle top-left shape

<div class="triangle_top_left"></div>.triangle_top_left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 0;
  border-color: orange transparent transparent transparent;
}
Triangle top-left

Triangle top-right shape

<div class="triangle_top_right"></div>.triangle_top_right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 100px 0;
  border-color: transparent orange transparent transparent;
}
Triangle top-right

Triangle bottom-right shape

<div class="triangle_bottom_right"></div>.triangle_bottom_left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100px;
  border-color: transparent transparent transparent orange;
}
Triangle bottom-right

Triangle bottom-left shape

<div class="triangle_bottom_left"></div>.triangle_bottom_left {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100px;
  border-color: transparent transparent transparent orange;
}
Triangle bottom-left

Trapezoid shape

<div class="trapezoid"></div>.trapezoid {
  border-bottom: 100px solid orange;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
}
Trapezoid

Parallelogram shape

<div class="parallelogram"></div>.parallelogram {
  width: 160px;
  height: 80px;
  transform: skew(20deg);
  background: orange;
}
Parallelogram

Star shape — 5 points

<div class="star_5"></div>.star_5 {
  position: relative;
  width: 0px;
  height: 0px;
  display: block;
  border-right: 100px solid transparent;
  border-bottom: 70px solid orange;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}

.star_5:before {
  content: '';
  position: absolute;
  display: block;
  top: -45px;
  left: -65px;
  border-bottom: 80px solid orange;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  height: 0;
  width: 0;
  transform: rotate(-35deg);
}
.star_5:after {
  content: '';
  position: absolute;
  display: block;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid orange;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
}
Star — 5 points

Star shape — 6 points

<div class="star_6"></div>.star_6 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid orange;
  position: relative;
}

.star_6:before {
  content: "";
  position: absolute;
  top: 30px;
  left: -50px;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid orange;
}
Star — 6points

Star shape — 8 points

<div class="star_8"></div>.star_8 {
  background: orange;
  width: 80px;
  height: 80px;
  position: relative;
  transform: rotate(20deg);
}

.star_8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: orange;
  transform: rotate(135deg);
}
Star — 8points

Star 12 points

<div class="star_12"></div>.star_12 {
  background: orange;
  width: 80px;
  height: 80px;
  position: relative;
}

.star_12:before,
.star_12:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: orange;
}

.star_12:before {
  transform: rotate(60deg);
}
.star_12:after {
  transform: rotate(30deg);
}
Star — 12points

Pentagon shape

<div class="pentagon"></div>.pentagon {
  position: relative;
  width: 90px;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: orange 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 orange;
}
Pentagon

Hexagon shape

<div class="hexagon"></div>.hexagon {
  width: 100px;
  height: 55px;
  background: orange;
  position: relative;
}

.hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid orange;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px; left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid orange;
}
Hexagon

Octagon shape

<div class="octagon"></div>.octagon {
  width: 100px;
  height: 100px;
  background: orange;
  position: relative;
}

.octagon:before {
   content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 29px solid orange;
  border-left: 29px solid rgb(24,24,24);
  border-right: 29px solid rgb(24,24,24);
  width: 42px;
  height: 0;
}
.octagon:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 29px solid orange;
  border-left: 29px solid rgb(24,24,24);
  border-right: 29px solid rgb(24,24,24);
  width: 42px;
  height: 0;
}
Octagon

Diamond shape

<div class="diamond"></div>.diamond {
 width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid orange;
  position: relative;
  top: -50px;
}

.diamond:before {
  content: '';
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid orange;
}
Diamond

Okay, all shapes above are pretty simple and common. Let’s create something less common but also easy.

Cut diamond shape

<div class="diamond"></div>.diamond {
  border-style: solid;
  border-color: transparent transparent orange transparent;
  border-width: 0 25px 25px 25px;
  height: 0;
  width: 50px;
  position: relative;
}

.diamond:before {
  content: "";
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: orange transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}
Cut diamond

Plus shape

<div class="plus"></div>.plus {
  width: 30px;
  height: 100px;
  background: orange;
  position: relative;
}

.plus:before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100px;
  height: 30px;
  background: orange;
}
Plus

Clover shape

<div class="clover">
  <span class="t_left"></span>
  <span class="t_right"></span>
  <span class="b_left"></span>
  <span class="b_right"></span>
</div>.clover {
  position: relative;
}

.clover span {
   width: 90px;
  height: 90px;
  background: orange;
  position: absolute;
}
.t_left {
  border-radius: 50% 50% 0 50%;
  left: -90px;
  top: 0px;
}

.t_right {
  border-radius: 50% 50% 50% 0%;
  right: -90px;
  top: 0px;
}

.b_left {
  border-radius: 50% 0% 50% 50%;
  left: -90px;
  top: 90px;
}

.b_right {
  border-radius: 0% 50% 50% 50%;
  right: -90px;
  top: 90px;
}
Clover

Heart shape

<div class="heart"></div>.heart {
  background: orange;
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  position: relative;
}
.heart:before,
.heart:after {
  content: '';
  position: absolute;
  background: orange;
  width: 100px;
  height: 100px;
  border-radius: 50%;

}
.heart:after {
  top: -50px;
  left: 0;
}
.heart:before {
  left: 50px;
  top: 0;
}
Heart

Crescent shape

<div class="crescent"></div>.crescent {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: transparent;
  box-shadow: inset -12px 5px 0 3px orange;
  border-radius: 50%;
}
Crescent

Half circle shape

<div class="half_circle"></div>.half_circle {
  background: orange;
  height: 90px;
  width: 45px;
  border-bottom-right-radius: 90px;
  border-top-right-radius: 90px;
}
Half circle

Drop shape

<div class="drop"></div>.drop {
  background: orange;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
}

.drop:before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  border: 42px solid transparent;
  border-bottom: 62px solid orange;
  transform: translateX(-50%);
}
Drop

Welcome to CSS-images world!

I hope that you will get familiar with CSS shapes. As you see, CSS shapes are enjoyable and easy. To test yourself, try to draw them on your own without looking in CSS code.

In the next article, we will be talking about creating bubble speeches 😎. Thanks for reading!

Originally published at https://www.albertwalicki.com.

CSS
Css3
Css Image

--

--

Albert Walicki
Level Up Coding
Follow

Written by Albert Walicki

271 Followers
Writer for

Frontend developer, entrepreneur, biker. 👉 My Frontend book: www.frontendunicorn.com 👉 We build apps at www.hype4.com

Follow

Help

Status

About

Careers

Blog

Privacy

Terms

Text to speech

Teams