Create Different Shapes With CSS

Create different shapes with CSS. Creating shapes usually a combination of using width, height, top, right, left, border, bottom, transform, and pseudo-elements. CSS is capable of making all types of shapes. we will design some different types of shapes using CSS. Rectangle & square are really easy with just use of height & width.

We can also use the ::before & ::after pseudo elements in CSS, which potentially gives 2 more element in a single element name. We also have modern CSS properties like shape-outside and clip-path.

Table of Contents

1. Square

Creating a square is the easiest with CSS. You just need to set the width & height of the element as same.

<div class="square"></div>

.square {
    width: 100px;
    height: 100px; 
    background: #F45B69;
}

Square | Create different shapes using CSS — Square with CSS

2. Circle

To create a circle border-radius property is applied to a square. border-radius is set to 50%. If you set a different height and width it will be an oval instead.

<div class="circle">

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #F45B69;
}

Circle | Create different shapes with CSS — Circle with CSS

Read our other blog posts here

3. Triangle

Triangles in CSS are a bit trickier. You have to use the border of the element. By setting the width & height of the element to be 0 & We can set the border as a triangle. The border edges are 45 degrees diagonal in an element. To set 1 side as a triangle, we need to set the other 2 adjacent sides as background: transparent;

Triangle border concept — Border of a Element

You can rotate to change the directions of a triangle or just change the border side according to your need.

<div class="triangle"></div>

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #F45B69;
}

Triangle | Create different shapes with CSS — Triangle

4. 6 Sides Star

A star is created by using 2 triangles. 1 triangle is up & the other triangle is facing down. Both triangles are created using 1 element. direct property & :after are used here.

<div classs="star"></div>

.star {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #F45B69;
    position: relative;
    background: #F45B69;
}
.star:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #F45B69;
    top: 30px;
    left: -50px;
    background: #F45B69;
}

Star | crate different shapes with CSS — 6 sided star with CSS

5. Parallelogram

Parallelogram is relatively easy to create. Add skew() property to the rectangle to convert it into a parallelogram.

<div class="parallelogram"></div>

.parallelogram {
    width: 100px;
    height: 50px;
    transform: skew(15deg);
    background: #F45B69;
}

6. Another Way

The shape-outside property lets define a shape of an element that the text will wrap around. You can also use the clip-path property. You can create your shape with that in the same way, but it won’t let the text wrap around your shape like shape-outside does.

To wrap text around an element, following properties are used

circle()
polygon()

A polygon is a shape with different vertices/coordinates.

Thank you for reading the blog 💝. Read our other blogs here.

Create different shapes with CSS