create shapes using css


Css is a tricky thing with which we can create unique shapes be it in the background or as an object on the foreground. You might have noticed some little cute triangles added on the edge of some boxes to provide a unique look while squares, rectangles, rounded rectangles, ovals and circles are the regular ones we see most often in webpages. Lets see how we can create such shapes using css with ease.

Regular CSS Shapes - Square, Rectangle, Rounded Rectangle, Oval and Circle

 

Square shapes are very common in css. We use it as backgrounds or content boxes all the time. All we need to do is define equal height and width for the div element we want to style and add a background.

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

Rectangle

 

Another common css shape any web designer uses more often is the rectangle. It's a varied form of square where we define unequal height and width to any div element we want to style.

.rectangle{
	width: 200px;
	height: 100px;
	background: #222;
}

Rounded Square / Rectangle

 

Another common css shape is the rounded rectangle. It's a varied form of square / rectangle where we define border radius to make the corners round.

.rounded-rectangle{
	width: 200px;
	height: 100px;
	background: #222;
	border-radius: 10px;
}

Oval

 

If we deviate to a considerably higher border-radius value from a rounded rectangle, we'll get an oval shape. We will get an oval shape if we defined a higher border-radius to a rectangle.

.oval{
	width: 200px; 
	height: 100px; 
	background: #222; 
	border-radius: 100px / 50px;
}

Circle

 

Similar to the square shape, a circle also needs to have equal width and height with 50% border-radius. If you want to add the border-radius in pixel value then it is the half of the height or width value of the shape.

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

Css Shapes - Triangles

Triangles are also seen a lot in webpages especially to denote any links as active or to stylize regular content boxes to provide a unique look.

Creating a triangle is much easier than it looks. You simply need to define the width and height of the triangle as 0. Then, define the border-size of three sides of the triangle ommitting the one side where you want the top point of your triangle to face. Define a larger base border value and add some border color while defining smaller but equal base value for the other two sides with border color defined as transparent.

We can make the triangle turn anyside simply by changing its border properties.

Triangle Up

 

Add a higher border-width value with solid border-color at the bottom along with smaller border-width values on the left and right side with transparent border-color and you'll get a triangle facing upwards.

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

Triangle Down

 

Replace the border-bottom property with a border-top property and you'll get a trianlge that's facing downwards.

.triangle-down{
	width: 0;
	height: 0;
	border-left: 50px solid trasparent;
	border-right: 50px solid trasparent;
	border-top: 100px solid #222;
}

Triangle Left

 

Replace the border-left property with a border-top or border-bottom property and you'll get a trianlge that's facing downwards.

.triangle-left{
	width: 0;
	height: 0;
	border-bottom: 50px solid trasparent;
	border-top: 50px solid trasparent;
	border-right: 100px solid #222;
}

Triangle Right

 

Replace the border-right property with a border-left and you'll get a trianlge that's facing downwards.

.triangle-right{
	width: 0;
	height: 0;
	border-bottom: 50px solid trasparent;
	border-top: 50px solid trasparent;
	border-left: 100px solid #222;
}

Css Shapes - Right Angled Triangles

Right angled triangles are quick and easy to create than normal ones. We need to define the borders on two sides only while defining the height and width as 0.

Top Left Triangle

 

To create a top left right angled triangle we need to define the border-top property with solid color and border-right property as a transparent border.

.top-left{
	width: 0;
	height: 0;
	border-top: 100px solid #222;
	border-right: 100px solid transparent;
}

Top Right Triangle

 

To create a top right right angled triangle we need to define the border-top property with solid color and border-left property as a transparent border.

.top-left{
	width: 0;
	height: 0;
	border-top: 100px solid #222;
	border-left: 100px solid transparent;
}

Bottom Left Triangle

 

To create a bottom left right angled triangle we need to define the border-bottom property with solid color and border-right property as a transparent border.

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

Bottom Right Triangle

 

To create a bottom right right angled triangle we need to define the border-bottom property with solid color and border-left property as a transparent border.

.top-left{
	width: 0;
	height: 0;
	border-top: 100px solid #222;
	border-left: 100px solid transparent;
}

Positioning a Triangular Shape Alongside a Regular Shape (Using Position Absolute with ::after)

Now, you know how to create these shapes. Lets add one of them to a regular one. Let's try to create a tooltip or a comment bubble like shape combining two shapes in css.

Hey! What did you learn today?

Here's the actual css used in this element.

.comment-bubble{ 
	width: 200px; 
	padding: 10px 20px; 
	border-radius: 30px; 
	background: #222; 
	position: relative; 
	margin-bottom: 30px; 
	color: #fff; 
	text-align: center; 
	font-size: 12px; 
}
.comment-bubble:after{ 
	content: ''; 
	position: absolute; 
	width: 0; 
	height: 0; 
	border-top: 15px solid #222; 
	border-left: 10px solid transparent; 
	border-right: 10px solid transparent; 
	top: 100%; 
	right: 45%; 
}