In this multi-part tutorial we will use CSS properties to draw various shapes like circles, triangles, rectangles, squares, polygon, stars, diamonds, charts and much more. In this first part we will start with CSS Shapes – Circle and various forms of circle.
You can visit other parts of tutorial here:
- CSS Shapes – Circle
- CSS Shapes – Triangle
- CSS Shapes – Square Rectangle Parallelogram Trapezoid and Polygons
- CSS Shapes – Diamond and Star
- CSS Shapes – Chart and Ribbon
- Different CSS Shapes
Circle
1 2 3 4 5 6 7 8 | #circle { width: 140px; height: 140px; background: #103252; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } |
Oval
1 2 3 4 5 6 7 8 | #oval { width: 200px; height: 100px; background: #103252; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; } |
Egg
1 2 3 4 5 6 7 8 9 | #egg { display: block; width: 126px; height: 180px; background-color: #103252; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; -moz-border-radius: 63px 63px 63px 63px/ 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } |
Half Circles: Top, Right, Bottom, Left
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | #halfCircleTop { height: 70px; width: 140px; border-radius: 140px 140px 0 0; -moz-border-radius: 140px 140px 0 0; -webkit-border-radius: 140px 140px 0 0; background: #103252; } #halfCircleRight { height: 140px; width: 70px; border-radius: 0px 140px 140px 0; -moz-border-radius: 0px 140px 140px 0; -webkit-border-radius: 0px 140px 140px 0; background: #103252; } #halfCircleBottom { height: 70px; width: 140px; border-radius: 0 0 140px 140px; -moz-border-radius: 0 0 140px 140px; -webkit-border-radius: 0 0 140px 140px; background: #103252; } #halfCircleLeft { height: 140px; width: 70px; border-radius: 140px 0 0 140px; -moz-border-radius: 140px 0 0 140px; -webkit-border-radius: 140px 0 0 140px; background: #103252; } |
Quarter Circles: Top Right, Top Left, Bottom Right, Bottom Left
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | #quarterCircleTopRight { width: 140px; height: 140px; background: #103252; border-radius: 0 140px 0 0; -moz-border-radius: 0 140px 0 0; -webkit-border-radius: 0 140px 0 0; } #quarterCircleTopLeft { width: 140px; height: 140px; background: #103252; border-radius: 140px 0 0 0; -moz-border-radius: 140px 0 0 0; -webkit-border-radius: 140px 0 0 0; } #quarterCircleBottomRight { width: 140px; height: 140px; background: #103252; border-radius: 0 0 140px 0; -moz-border-radius: 0 0 140px 0; -webkit-border-radius: 0 0 140px 0; } #quarterCircleBottomLeft { width: 140px; height: 140px; background: #103252; border-radius: 0 0 0 140px; -moz-border-radius: 0 0 0 140px; -webkit-border-radius: 0 0 0 140px; } |
In this article you came to know how to use CSS properties to draw CSS Shape – Circle as well as it’s variations. In upcoming articles we have discussed about creating more CSS Shapes.