CSS Shapes Explained: How to draw a circle, triangle, and more with pure CSS (2023)

Below I will explain the basics of creating shapes with CSS. There area lotto inform about this topic! As such, I won't cover all (far from all) tools and shapes, but this should give you a basic idea of ​​how to create shapes with CSS.

Some shapes require more "fixes and tricks" than others. Creating shapes with CSS is usually a combination of usingwidth, height, top, right, left, margin, bottom, transformand pseudo elements like:BeforeAnd:after.We also have more modern CSS properties to create like shapesform-outsideAndclip path.I will write about them below too.

CSS Shapes - The basic way

With a few tricks in CSS we could always create simple shapes like squares,circles,and triangles with regular CSS properties. Now let's look at some of them.

squares and rectangles

Squares and rectangles are probably the easiest shapes to achieve. By default, a div is always a square or a rectangle.

You set the width and height as shown in the following code. Then the element only has to be given a background color. They can have any other properties for the element.

#square { background: light blue; width: 100px; Height: 100px;}

circles

It's almost as easy to create a circle. To create a circle we can set the border radius for the element. This creates curved corners on the element.

If we set it to 50% a circle will be created. If you set a different width and height, we get an oval instead.

#circle {background: light blue; border radius: 50%; width: 100px; Height: 100px;}

triangles

Triangles are a bit trickier. We need to set the bounds of the element to match a triangle. By setting the element's width and height to zero, the actual width of the element equals the width of the frame.

Remember that the border edges of an element are 45 degree diagonals to each other. That's why this method works to create a triangle. By setting one of the frames to a solid color and the other frames to transparent, it takes on the shape of a triangle.

#triangle {width: 0; height: 0; Edge left: 40 pixels solid transparent; Border Right: 40 pixels solid transparent; border below: 80px light blue ;}

If you want a triangle/arrow to point in a different direction you can change the border values ​​according to which side you want to be visible. Or you can rotate the item withtransformproperty if you want to be really chic.

#triangle {width: 0; height: 0; Border Top: 40 pixels solid transparent; Border right: 80 pixels light blue; Border Bottom: 40 pixels solid transparent; }

Alright - this is an introduction to basic shapes with CSS. There is probably an infinite number of shapes you can create. These are just the basics, but with a little creativity and determination, you can go a long way with simple CSS properties.

In some cases, with more advanced forms, it's also a good idea to use the :after and :before pseudo-selectors. However, that's out of the scope of this article as I want to cover the basics to get you up and running.

Disadvantage

The above approach has a major downside.For example if you want your text to flow around and wrap around your shape. A normal HTML div with background and borders to form the shape won't allow that. The text will not adjust and will flow around your shape. Instead, it flows around the div itself (which is a square or rectangle).

Below is an image showing the triangle and text flow.

Luckily we have some modern CSS properties that we can use instead.

CSS Shapes - The other way

Nowadays we have a property calledform-outsideuse in css. This property allows you to define a shape around which the text wraps/flows.

Here's a tip: You can also use theclip pathProperty. You can use it to create your shape in the same way, but it won't wrap the text around your shape like Shape-outside does.

The element to which we apply the shape using the shape-outside property must be floated. It must also have a defined width and height.This is really important to know!

You can read more about whyHere. Also below is some text I took from the provided link to developer.mozilla.org.

Theform-outsideproperty is specified with the values ​​from the following list, which define the float scope for float elements. The float area determines the shape around which inline content (float elements) flows.

Mission()

The inset() type can be used to create a rectangle/square with an optional offset for the wrapping text. You can specify values ​​for how much your wrapping text should overlap the shape.

You can set the offset to be the same for all four directions:Inset (20px).Or it can be set individually for each direction:Inset (20px 5px 30px 10px).

You can also use other units to set the offset, e.g. B. percent. The values ​​correspond as follows:Inset (top right bottom left).

Consider the following code example. I set the inset values ​​to 20px top, 5px right, 30px bottom, and 10px left. If you want your text to wrap around your square instead, you can skip using inset() altogether. Instead, set the background on your div and specify the size as usual.

#square {float: left; width: 100px; Height: 100px; shape-outside: inset (20px 5px 30px 10px); background: light blue; }

It is also possible to give inset() a second value indicating the edge radius of the inset. As below:

#square {float: left; width: 100px; Height: 100px; shape-outside: inset (20px 5px 30px 10px around 50px); background: light blue; }

Kreis()

In this a circle is createdform-outsideProperty. You must also apply aclip pathwith the appropriate property to make the circle appear.

Theclip pathThe property can take the same value as the shape-outside property, so we can assign it the defaultKreis()shape we used forform-outside. Also notice that I've applied a 20px border to the element here to give the text some space.

#circle { float: left; Width: 300px; Height: 300px; border: 20px; shape-outside: Circle(); clip path: circle(); background: light blue;}

In the example above, I don't specify the radius of the circle. That's because I want it to be as big as the div (300 pixels). If you want to specify a different size for the circle, you can do so.

The circle () takes on two values. The first value is the radius and the second value is the position. These values ​​indicate the center of the circle.

In the example below, I set the radius to 50%. Then I moved the center of the circle by 30%. Note that the word "at" must be used between the radius and position values.

I also specified a different position value for the clip path. This bisects the circle when I move the position to zero.

#circle { float: left; Width: 150px; Height: 150px; border: 20px; Form-Outside: Circle (50% at 30%); Clipping Path: Circle (50% at 0%); background: light blue; }

Ellipse()

Ellipses work the same as circles except they create an oval. You can define both x-value and y-value as follows:Ellipse (25px 50px).

Just like a circle, it also takes a position value as its last value.

#ellipse { float: left; Width: 150px; Height: 150px; border: 20px; Form-Outside: Ellipse (20% 50%); Clipping Path: Ellipse (20% 50%); background: light blue; }

polygon ()

A polygon is a shape with various defined vertices/coordinates. Below I'm creating a "T" shape that will be the first letter in my name. I'll start at coordinates 0,0 and move left to right to create the "T" shape.

#polygon { float: left; Width: 150px; Height: 150px; border: 0 20px; Shape-Outside: Polygon (0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20%); Clip Path: Polygon (0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20%); background: light blue; }

Pictures

You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.

This is a PNG image with a transparent background.

<img src="src/moon.png" id="Mond" />

#moon { float: links; Breite: 150px; Höhe: 150px; shape-outside: url(./src/moon.png"); }

And that's it! Thank you for reading.

About the author of this article

My name is Thomas Weibenfalk and I'm a developer from Sweden. I regularly create free tutorials on my Youtube channel. There are also a few premium courses on React and Gatsby. Please visit me at these links:

Twitter —@weibenfalk,
Weibenfalk anYoutube,
WeibenfalkCourse-Website.