Besides styling elements, web designers can create shape-like custom paths through CSS websites. These shapes are often polygons, circles, and triangles. Read this guide to learn how to code different shapes from CSS shapes.

Square and Rectangle

The most basic shapes are square and rectangle, and they are the easiest to make in CSS. Here’s how:

• Create a <div> and put the height and a width.

Circle and Ellipse

To get a circle, create a border-radius of 50% to a square. To get an ellipse, assign 50% border-radius to a rectangle.

Triangles

Set the height and the width of the triangle to zero. Now, you will see that the width of the border is now the width of the element itself because we are using these borders to make the triangles. The edges of the borders should just be 45-degree diagonal to each other. Do not hesitate to play around with the border color and height to achieve different triangle types.

Besides the basic shapes, you can also achieve advanced shapes such as the star, pentagon, and heart through CSS.