Creating Shapes With CSS

I have been working on a new project where I needed to make shapes with just CSS. I needed the aplication to be as small as possible, so I did not want to use images for the shapes. So I researched how to make the shapes I wanted. If you are designing an app and want the most things to be in CSS as possible, this post will help.

CSS Video Controls

Here are the video controller shapes I ended up using.

I used the shapes of a circle, triangle, and squares. I will explain how to make each.

CSS Circle

To create a circle you need to make a div box with rounded corners, that are half the height and width.

#circle{
	width: 40px;
	height: 40px;
	background: black;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

This first creates a square, then rounds the corners of so that it looks like a circle

CSS triangle

When you give an element a border with different colors per side, you can see it makes a trapezoid shape.

#trapezoid{
	height: 20px;
	width: 20px;
	border-bottom: 10px red solid;
	border-top: 10px black solid;
	border-left: 10px green solid;
	border-right: 10px blue solid;
}

So by making a box with no width or height, and messing with the borders, a triangle can be made.

#trianglePre{
	height: 0px;
	width: 0px;
	border-bottom: 20px solid red;
	border-top: 20px solid red;
	border-left: 40px black solid;
}

By making one side of the border large, and creating the adjacent borders half the size, a triangle is made. The problem is, it is stuck between two other triangles. By making the other borders transparent, the triangle is free.

#triangle{
	height: 0px;
	width: 0px;
	border-bottom: 20px solid transparent;
	border-top: 20px solid transparent;
	border-left: 40px black solid;
}

Square

#square{
	height: 40px;
	width: 40px;
	background: black; 
}

No reason to go into explaining how this one is made, enough said.

1 Comment

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked