How to Create Shapes in CSS

In today’s tutorial, let’s create a simple list of the most common shapes that can be created using CSS3. We will make progress through the article and at the end, you will learn how to create something truly great.

This tutorial will give you an insight into CSS3 Shapes and how to create them on your own. It covers multiple shapes that can really speed up your site, as the need for images will reduce. Let’s begin!

If you’re looking for an introduction into SVG, take a look at this post: How to Create Simple Shapes with SVG.

What You’ll Need To Complete This Tutorial

• Knowledge of CSS3
• Time and Patience

Create a CSS Circle

HTML

To create a circle in CSS, first we need a div and give it an ID name of the shape. So for this example, set circle as the ID name.

<div id="circle"></div>

CSS

For the CSS, simply put a width and height and then give it a border radius half of the width and the height.

#circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px;
} 

Create a CSS Square

HTML

To create a square shape in CSS, just like the circle shape, we need a div and give it an ID name of the shape. So, for this example, set square as the ID name.

<div id="square"></div>

CSS

For the CSS of square, simply set up a width and height of equal value and provide a value making it look visible.

#square { width: 120px; height: 120px; background: #f447ff;
}

Create a CSS Rectangle

HTML

To create a rectangular CSS shape, just like the square shape, set-up a div with the ID name rectangle.

<div id="rectangle"></div>

CSS

Just like the square shape, we will put a simple width but this time larger than the height.

#rectangle { width: 220px; height: 120px; background: #4da1f7;
}

Create a CSS Oval

HTML

To create an oval in CSS, create a div with the ID name oval.

<div id="oval"></div>

CSS

Oval is almost similar with circle shape; however, the oval is rectangular in shape and will need a radius that is half of the height.

#oval { width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px;
}

Create a CSS Triangle

HTML

In order to create a triangle in CSS, set up again a div with the ID name triangle.

<div id="triangle"></div>

CSS

To create a triangle, manipulate the border property. Manipulating the width of the border will give you different results at rotational angles.

#triangle { width: 0; height: 0; border-bottom: 140px solid #fcf921; border-left: 70px solid transparent; border-right: 70px solid transparent;
}

Create a CSS Triangle Down

HTML

To create an inverted triangle shape using CSS, create again a div with the ID name triangle_down.

 <div id="triangle_down"></div>

CSS

Creating an inverted triangle, we need to manipulate the border property of the bottom.

#triangle_down { width: 0; height: 0; border-top: 140px solid #20a3bf; border-left: 70px solid transparent; border-right: 70px solid transparent;
}

Create a CSS Triangle Left

HTML

To create a triangle shape that faces left, set up a div again with the ID name triangle_left.

<div id="triangle_left"></div>

CSS

Creating a triangle that faces left, manipulate the border property of the right side.

#triangle_left { width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #6bbf20; border-bottom: 70px solid transparent;
}

Create a CSS Triangle Right

HTML

In order to create a triangle shape that faces right, set up a div with the ID name triangle_right.

<div id="triangle_right"></div>

CSS

Creating a triangle that faces left, manipulate the border property of the left side.

#triangle_right { width: 0; height: 0; border-top: 70px solid transparent; border-left: 140px solid #ff5a00; border-bottom: 70px solid transparent;
}

Create a CSS Diamond

HTML

To create a diamond shape using CSS, provide a div with the ID name diamond.

<div id="diamond"></div>

CSS

Creating a diamond can be displayed in many ways. Using the transform property along with rotate value will enable to display two triangles next to each other.

#diamond { width: 120px; height: 120px; background: #1eff00;
/* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
/* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px;
}

Create a CSS Trapezium

HTML

In order to create a trapezium shape using CSS, set up a div with the ID name trapezium.

<div id="trapezium"></div>

CSS

A trapezium can be displayed by setting up equal left and right border with a flat bottom.

#trapezium { height: 0; width: 120px; border-bottom: 120px solid #ec3504; border-left: 60px solid transparent; border-right: 60px solid transparent;
}

Create a CSS Parallelogram

HTML

Creating a parallelogram shape using CSS will need a div with the ID name parallelogram.

<div id="parallelogram"></div>

CSS

To create a parallelogram shape, set up a transform value of skew to turn the element in a 30 degree angle.

#parallelogram { width: 160px; height: 100px; background: #8734f7; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg);
} 

Create a CSS Star

HTML

In order to create a star shape using CSS will need a div with the ID name star.

<div id="star"></div>

CSS

Creation of a star is a strange manipulation of borders with the use of rotate value of transform. See code below.

#star { width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);
} #star:before { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);
} #star:after { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg);
}

Create a CSS Six Point Star

HTML

The markup for a six pointed star shape using CSS will need a div with the ID name parallelogram.

<div id="star_six_points"></div>

CSS

Unlike the regular star with five points, the six point star will be manipulated using the border properties. Create two sets of shapes and then combine them as one.

#star_six_points { width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto;
} #star_six_points:after { content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #de34f7; margin: 30px 0 0 -50px;
}

Create a CSS Pentagon

HTML

To create a pentagon, set up a div with an id of pentagon.

<div id="pentagon"></div>

CSS

Creating a pentagon needs two elements that go into creating one. First create a trapezoid shape and then add a triangle shape on top of it.

#pentagon { width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent;
} #pentagon:before { content: ""; height: 0; width: 0; position: absolute; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #277bab;
}

Create a CSS Hexagon

HTML

In order to create a hexagon, set up a div with an ID of hexagon.

<div id="hexagon"></div>

CSS
There are different ways to create a hexagon. One way to create it is almost identical to the creation of the pentagon. First create a rectangular shape and then add two triangles on the top.

#hexagon { width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto;
} #hexagon:before { content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e;
} #hexagon:after { content: ""; width: 0; height: 0; position: absolute; bottom: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #fc5e5e;
}

Create a CSS Octagon

HTML

Creating an octagon will require a div with an ID octagon.

<div id="octagon"></div>

CSS

An octagon can be a hack too. First create two identical trapezoids and then put two triangles from each side. Although there are also some other ways to do this, this is the best way to accomplish the task.

#octagon { width: 100px; height: 100px; background: #ac60ec; position: relative;
} #octagon:before { content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4;
} #octagon:after { content: ""; width: 42px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4;
} }

Create a CSS Heart

HTML

To create a heart shaped CSS, let’s first create a div with an ID name of heart.

<div id="heart"></div>

CSS

Heart shapes can be hard to do but it can be done by rotating elements from different angles and changing the transform-origin property to enable changing the position of the transformed element.

#heart { position: relative;
} #heart:before,#heart:after { content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;
} #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%;
} 

Create a CSS Egg

HTML

In order to create an egg shape CSS, first create a div with an ID name egg.

<div id="egg"></div>

CSS

An egg shape is almost identical to the oval shape except that the height is a bit higher than the width and the radius is carefully manipulated to get a good result.

#egg { width: 136px; height: 190px; background: #ffc000; display: block; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Create a CSS Infinity Symbol

HTML

To create an infinity shape in CSS, create a div with an ID name infinity.

<div id="infinity"></div>

CSS

Infinity shapes can be achieved by carefully manipulating the borders and setting the angle of the circle like shape.

#infinity { width: 220px; height: 100px; position: relative;
} #infinity:before,#infinity:after { content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
} #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}

Create a CSS Comment Bubble

HTML

In order to create a comment bubble shape in CSS, create a div with an ID name comment_bubble.

<div id="comment_bubble"></div>

CSS

A bubble comment shape can be created by making a rectangle and giving it a border radius, then place a triangular shape on the left side.

#comment_bubble { width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;
} #comment_bubble:before { content: ""; width: 0; height: 0; right: 100%; top: 38px; position: absolute; border-top: 13px solid transparent; border-right: 26px solid #088cb7; border-bottom: 13px solid transparent;
}

Create a CSS Pacman

HTML

To create a pacman shape in CSS, create a div with an ID name of pacman.

<div id="pacman"></div>

CSS

Creating a pacman is a hack too. Just manipulate the border and the radius to create an opening on the left side of the circle.

#pacman { width: 0; height: 0; border-right: 70px solid transparent; border-top: 70px solid #ffde00; border-left: 70px solid #ffde00; border-bottom: 70px solid #ffde00; border-top-left-radius: 70px; border-top-right-radius: 70px; border-bottom-left-radius: 70px; border-bottom-right-radius: 70px;
}

Final Words

There are a lot of advantages to using CSS shapes for putting images on your website. You can use shapes today as a part of your progressive workflow, though they have acceptable fallback options in non-supporting browsers especially with the Jurassic IE browsers.