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.
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; }

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; }

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;

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; }

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; }

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.
Follow us on Instagram.