This fifth part of CSS Shapes series covers making Chart and Ribbon using CSS. The Chart is shown in Top, Right, Bottom, Left direction while Bookmark Ribbon and Badge Ribbon are two forms given of Ribbon.
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
The Chart can also be used as PacMan.
Chart: 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 36 37 38 39 | #chartTop{ width: 0; height: 0; border: 100px solid #103252; border-top: 100px solid transparent; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } #chartRight{ width: 0; height: 0; border: 100px solid #103252; border-right: 100px solid transparent; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } #chartBottom{ width: 0; height: 0; border: 100px solid #103252; border-bottom: 100px solid transparent; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } #chartLeft{ width: 0; height: 0; border: 100px solid #103252; border-left: 100px solid transparent; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } |
Ribbon: Bookmark, Badge
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 36 37 38 39 40 41 | #bookmarkRibbon{ width: 0; height: 120px; border-right: 60px solid #103252; border-left: 60px solid #103252; border-bottom: 36px solid transparent; } #badgeRibbon { width: 120px; height: 120px; position: relative; background: #103252; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } #badgeRibbon:before, #badgeRibbon:after { content: ''; position: absolute; border-bottom: 84px solid #103252; border-left: 48px solid transparent; border-right: 48px solid transparent; top: 84px; left: -12px; -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); -ms-transform: rotate(-140deg); -o-transform: rotate(-140deg); } #badgeRibbon:after { left: auto; right: -12px; -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -ms-transform: rotate(140deg); -o-transform: rotate(140deg); } |
We have covered a lot of shapes yet. In the last part we will look at Speech Bubble, Heart, Biohazard, Yin Yang, Infinity, Magnifying Glass and TV.