Creating basic and more advanced shapes in CSS.

CSS gives us the opportunity to create multiple Shapes.

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. First two shapes are created. Adding border-radius and you have circles and ovals.

More complex shapes require to add :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

HTML
CSS
PREVIEW

Rectangle shape

HTML
CSS
PREVIEW

Circle shape

HTML
CSS
PREVIEW

Elipse shape

HTML
CSS
PREVIEW

Isosceles triangle shape

HTML
CSS
PREVIEW

Triangle up shape

HTML
CSS
PREVIEW

Triangle down shape

HTML
CSS
PREVIEW

Triangle left shape

HTML
CSS
PREVIEW

Triangle right shape

HTML
CSS
PREVIEW

Triangle top left shape

HTML
CSS
PREVIEW

Triangle top right shape

HTML
CSS
PREVIEW

Triangle bottom right shape

HTML
CSS
PREVIEW

Triangle bottom left shape

HTML
CSS
PREVIEW

Trapezoid shape

HTML
CSS
PREVIEW

Parallelogram shape

HTML
CSS
PREVIEW

Star shape - 5 points

HTML
CSS
PREVIEW

Star shape - 6 points

HTML
CSS
PREVIEW

Star shape - 8 points

HTML
CSS
PREVIEW

star 12 points

HTML
CSS
PREVIEW

Pentagon shape

HTML
CSS
PREVIEW

Hexagon shape

HTML
CSS
PREVIEW

Octagon shape

HTML
CSS
PREVIEW

Diamond shape

HTML
CSS
PREVIEW

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

Cut diamond shape

HTML
CSS
PREVIEW

Plus shape

HTML
CSS
PREVIEW

Clover shape

HTML
CSS
PREVIEW

Heart shape

HTML
CSS
PREVIEW

Crescent shape

HTML
CSS
PREVIEW

Half circle shape

HTML
CSS
PREVIEW

Drop shape

HTML
CSS
PREVIEW

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!

Join my newsletter for regular updates every two weeks

© Albert Walicki 2021