Having fun with CSS Shapes
CSS is a style sheet language that is used to style the look and format of a document written in markup language. We could also use CSS to create a lot of different shapes. In order to create shapes using CSS, you would need to create a div element in HTML. A div element is essentially a rectangle/square. There are two types of div element that you can create; a “div id” or a “div class”. The important thing to note about the differences between a “div id” and a “div class” is that the id selector takes precedence over class selector. There is a good discussion thread in stack overflow that discuss about the differences between using “div id” vs “div class”. The example below shows how to create a circle with CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<head>
<style>
.circle
{
width: 200px;
height: 200px;
background: blue;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
</style>
</head>
<body>
<div class="circle"></div>
</body><!--end div circle-->
Below are some shapes demo that I have created using jsfiddle.
While writing this blog, I came across a good reference for creating shapes in css-tricks; ShapesOfCSS. This site contains lots of different shapes created using CSS. Put on you creative hat and start creating shapes with CSS! I created an Android Robot. What about you?