We are covering how to create Square, Rectangle, Parallelogram, Trapezoid and Polygons Shapes using CSS here. It’s third part in this series of articles ‘CSS Shapes‘.
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
Square, Rectangle, Parallelogram & Trapezoid
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 | #square { width: 140px; height: 140px; background: #103252; } #rectangle { width: 140px; height: 70px; background: #103252; } #parallelogramLeft { width: 140px; height: 70px; background: #103252; margin: 0 auto; transform: skew(25deg); -o-transform: skew(25deg); -moz-transform: skew(25deg); -webkit-transform: skew(25deg); } #parallelogramRight { width: 140px; height: 70px; background: #103252; margin: 0 auto; transform: skew(-25deg); -o-transform: skew(-25deg); -moz-transform: skew(-25deg); -webkit-transform: skew(-25deg); } #trapezoid { height: 0; width: 140px; border-bottom: 140px solid #103252; border-left: 70px solid transparent; border-right: 70px solid transparent; } |
Polygons: Pentagon, Hexagon, Octagon
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | #pentagon { position: relative; width: 108px; border-width: 100px 36px 0; border-style: solid; border-color: #103252 transparent; } #pentagon:before { content: ""; position: absolute; height: 0; width: 0; top: -170px; left: -36px; border-width: 0 90px 70px; border-style: solid; border-color: transparent transparent #103252; } #hexagon { width: 140px; height: 77px; position: relative; background: #103252; } #hexagon:before { content: ""; position: absolute; top: -35px; left: 0; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 35px solid #103252; } #hexagon:after { content: ""; position: absolute; bottom: -35px; left: 0; width: 0; height: 0; border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 35px solid #103252; } #octagon { width: 140px; height: 140px; background: #103252; } #octagon:before { height: 0; width: 56px; content:""; position: absolute; border-bottom: 42px solid #103252; border-left: 42px solid white; border-right: 42px solid white; } #octagon:after { height: 0; width: 56px; margin-top: 98px; content:""; position: absolute; border-top: 42px solid #103252; border-left: 42px solid white; border-right: 42px solid white; } |
In the next part we are going to create Diamond and Star CSS Shapes.