Pb28 CSS Geometric Shapes
Following CSS styles will come handy when you want to draw geometric shapes with CSS without using images. Most of them are done using CSS3 and so check if you browser supports it.
Circle
css
.circle {
width: 100px;
height: 100px;
background: #07CAF3;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Oval
css
.oval {
height: 200px;
width: 100px;
background: #07CAF3;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
Triangle
css
.triangle {
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #07CAF3;
}
Triangle Sided
css
.triangle-sided {
height: 0;
width: 0;
border-top: 100px solid #07CAF3;
border-right: 100px solid transparent;
}
Rectangle
css
.rectangle {
height: 100px;
width: 200px;
background: #07CAF3;
}
Parallelogram
css
.parallelogram {
height: 75px;
width: 150px;
background: #07CAF3;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
Trapezoid
css
.trapezoid {
height: 0;
width: 100px;
border-bottom: 100px solid #07CAF3;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
Cone
css
.cone {
height: 0;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid #07CAF3;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
These are all primitive geometric shapes. You can combine these and create more complex shapes like pentagon, hexagon, and more.