How to draw square, circle, triangle and other shapes with CSS

Very easy !! But without pen pencil or mouse, drawing shapes only with language is really romantic. No? Such is the thing we’re going to do. In this tutorial, we’ll show handy way how to draw a square, rectangle, circle, oval and triangle by using various CSS tricks and strategies.

By following this, you can draw your own shapes just by altering the value of the properties as own liking. Let’s start:

But for this, you have to have simple understanding of CSS as we won’t go into basic of CSS here.

If you don’t have, start with basic know-how of CSS from here–

How to draw Square in CSS

Square is the plane shape that has four equal straight sides with four right angles.

To draw a square, just take a div. Style it with the same value of width and height. To make it visible, set border or background property. That’s all. You can also use p element in place of div.

Now, look at the Code and stare at the Output:

CODE

<div style="width:60px; 
height:60px; 
border:1px solid black;"> 
</div>

OUTPUT

How to draw Rectangle with CSS

Rectangle is a four straight-sided shape of which opposite sides are equal and parallel. Opposite angles are also equal each measuring 90°.

To draw a rectangle, take a div or p element. Style it with unequal values of width and height. Set border or background property or both to make it visible.

CODE

<div style="width:70px; 
height:50px; 
border:1px solid black;
background:mintcream;"> 
</div>

OUTPUT

Use CSS trick to draw Circle

A circle is a round plane figure which has a boundary called circumference consisting of points equidistant from its center (a fixed point).

A circle must have a fixed center-point and a radius.

To draw a Circle, take a div or p element. Style it with equal values of width and height as we did in case of Square. Set border-radius:50%. Set border or background property or both to make it visible.

In short, if you put border-radius:50% in Square, this will turn into Circle. Just look:

CODE

<div style="width:70px; 
height:70px; 
border-radius: 50%;
border:1px solid black;"> 
</div>

OUTPUT

Using CSS trick to draw Oval

An oval (from Latin ovum, “egg”) is a rounded and slightly elongated shape in a plane which “loosely” resembles the outline of an egg.

To draw an Oval, take a div or p element. Style it with unequal values of width and height as we did in case of Rectangle. Set border-radius:50%. Set border or background property or both to make it visible.

In short, if you put border-radius:50% in Rectangle, this will turn into Oval. Follow the code:

CODE

<div style="width:80px; 
height:50px; 
border-radius: 50%;
border:1px solid black;
background:aliceblue"> 
</div>

OUTPUT

How to draw Triangle with CSS

Triangle is a plane figure consisting of three straight sides and three angles.

The subtle trick we’re going to use to draw Triangle is border property. As Triangle has three sides, probably, applying width and height won’t work.

So, take a div with value 0 of width and height. Set border property as shown below:

<div style="width:0; 
height:0;
border-bottom:60px solid pink;
border-right:30px solid transparent;
border-left:30px solid transparent;"> 
</div>

This will produce a Triangle whose base-side is created by border:bottom. See Output:

OUTPUT (Base-bottom)

You can create varied looking Triangles by changing the base-side to top, left or right as shown below. Remember, color-value of two other borders than the Base-border must be transparent. See below-

/* Base-top */
border-top:60px solid pink;
border-right:30px solid transparent;
border-left:30px solid transparent;">
/* Base-left */
border-left:60px solid pink;
border-top:30px solid transparent;
border-bottom:30px solid transparent;">
/* Base-right */
border-right:60px solid pink;
border-top:30px solid transparent;
border-bottom:30px solid transparent;">

Now try resetting each three-line code in above code block, run them in your own browser and enjoy outputs.

Drop a Comment, please!!