Basic Geometric Shapes in pure CSS
.red { border-color: red; } .green { border-color: green; } .blue { border-color: blue; } .square.red, .circle.red, .oval.red { background: red; } .square.green, .circle.green, .oval.green { background: green; } .square.blue, .circle.blue, .oval.blue { background: blue; } .shape { display: inline-block;} .square { width: 100px; height: 100px; } .circle { width: 100px; height: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } .oval { width: 160px; height: 100px; -moz-border-radius: 80px / 50px; -webkit-border-radius: 80px / 50px; border-radius: 80px / 50px; } ....