How To Draw Shapes Using CSS
Geometric shapes can be drawn by placing several <div> tags on the page and then adding the right length, width, color, rotation, and other available properties in CSS.
In this article, you will learn several ways to draw geometric shapes using HTML and CSS.
To choose the color of the shape, you can choose your favorite color through our color picker tool.
In all examples, you will notice that we added extra properties to all shapes like background-color and margin to let you see them better.
How To Draw A Square
We can draw a square by using a <div> and giving it same width and height.
.square {
width: 100px;
height: 100px;
background-color: #B45F04;
margin: 30px auto;
}
<div class="square"></div>
Output
How To Draw A Rhombus
A rhombus can be drawn by using a <div> and giving it an equal width and height, and then adding to it a 45-degree of rotation by using the rotate() function.
.rhombus {
width: 90px;
height: 90px;
transform: rotate(45deg);
background-color: #43c4c0;
margin: 30px auto;
}
<div class="rhombus"></div>
Output
How To Draw A Rectangle
We can draw a rectangle by using a <div> and giving it different width and height.
.rectangle {
width: 180px;
height: 80px;
background-color: #af8686;
margin: 30px auto;
}
<div class="rectangle"></div>
Output
How To Draw A Parallelogram
We can draw a parallelogram by using a <div>, giving it a width and height, and then adding to it any degree of skewing by using the skew() function.
.parallelogram {
width: 150px;
height: 70px;
transform: skew(15deg);
background-color: #08298A;
margin: 30px auto;
}
<div class="parallelogram"></div>
Output
How To Draw A Circle
We can draw a circle by using a <div> and giving it same width and height, and then add to it a border-radius: 50%.
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: darkcyan;
margin: 30px auto;
}
<div class="circle"></div>
Output
How To Draw An Oval Shape
We can draw an oval shape by using a <div> and giving it different width and height, and then add to it a border-radius: 50%.
.oval {
width: 170px;
height: 90px;
border-radius: 50%;
background-color: #dc1359;
margin: 30px auto;
}
<div class="oval"></div>
Output
Draw Complex Shapes Using CSS Clipping
Fortunately, you can use our CSS Clip Path Maker tool to draw various geometric shapes very easily.
As you can see, on the left side there are many different geometric shapes. In CSS, the clip-path property allows the creation of complex shapes by clipping an element to any shape (triangle, circle, ellipse, polygon, etc..).
You can drag the points to change the form of the shape. After you are done, you can copy the code or preview your shape directly in Web Editor by clicking on the Live Preview button.
How clip-path works
The clip-path property creates a clipping region that defines what part of an element should be shown. The parts that are inside the region will be shown. The parts that are outside the region will be hidden.
As a value for the clip-path property, we use the polygon(x y, x y, ..) function which can take a list of x-y points seperated with a comma, where x specify the location of point from the left of the element and y specify the location from its top.
Points can be specified in percentages relative to the size of the element itself or in pixels.
How To Draw A Triangle
To draw a triangle, we need to specify where its 3 points should be cropped.
We set the location of points as follows:
- The first point is sat horizontally in the middle and vertically in the top.
- The second point is sat horizontally on the left and vertically on the bottom.
- The third point is sat horizontally on the right and vertically on the bottom.
.triangle {
width: 120px;
height: 120px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background-color: #009dff;
margin: 30px auto;
}
<div class="triangle"></div>
Output
How To Draw A Hexagon
To draw a hexagon you need to create a region using 6 points.
.hexagon {
margin-left:auto;
margin-right: auto;
width: 100px;
height: 100px;
background-color: rgba(155, 72, 189, 0.99);
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
margin: 30px auto;
}
<div class="hexagon"></div>
Output
Remember that you can use our CSS Clip Path Maker tool to create any shape you want.
CSS Art Example
To draw a person, house, car or anything else. These complex shapes require drawing the parts separately and then displaying them in the appropriate place until they appear as one drawing.
In the following example, we draw a pencil by using HTML and CSS only.
Example
.pencil {
position: relative;
margin: 30px auto;
width: 32px;
}
.cap {
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 20px;
background: #e5e1d7;
border-bottom: 5px solid #000;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0 0 5px lightgray inset;
}
.pen-left {
position: absolute;
top: 20px;
width: 8px;
height: 70px;
background: #b00;
}
.pen-left .bot {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: 4px solid #b00;
border-left: 4px solid #fc3;
border-right: 4px solid #fc3;
}
.pen-middle {
position: absolute;
top: 20px;
left: 8px;
width: 16px;
height: 70px;
background: #e00;
}
.pen-middle .bot {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: 4px solid #e00;
border-left: 4px solid #fc3;
border-right: 4px solid #fc3;
}
.pen-right {
position: absolute;
top: 20px;
left: 24px;
width: 8px;
height: 70px;
background: #b00;
}
.pen-right .bot {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: 4px solid #b00;
border-left: 4px solid #fc3;
border-right: 4px solid #fc3;
}
.pencut {
position: absolute;
top: 90px;
left: 0;
width: 100%;
height: 16px;
background: #fc3;
clip-path: polygon(0 0, 32px 0, 24px 16px, 8px 16px);
}
.lead {
position: absolute;
top: 105px;
left: 8px;
width: 16px;
height: 16px;
background: black;
clip-path: polygon(0 0, 16px 0, 8px 16px);
}
Output
Now, you can draw any shape you want 🙂
