Diamond and Star shapes can also be formed using CSS. This article will guide you to define CSS properties to create Diamond, Narrow Diamond, Cut Diamond and Shield Diamond as well as Five Star, Six Star, Eight Star and Twelve Star.
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
Diamond (Regular, Narrow, Cut, Shield)
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 78 | #diamond { width: 140px; height: 140px; background: #103252; margin-left: 140px; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #narrowDiamond { width: 0; height: 0; border: 75px solid transparent; border-bottom: 105px solid #103252; position: relative; top: -75px; } #narrowDiamond:after { content: ''; position: absolute; left: -75px; top: 105px; width: 0; height: 0; border: 75px solid transparent; border-top: 105px solid #103252; } #cutDiamond { border-style: solid; border-color: transparent transparent #103252 transparent; border-width: 0 40px 40px 40px; height: 0; width: 80px; position: relative; } #cutDiamond:after { content: ""; position: absolute; top: 40px; left: -40px; width: 0; height: 0; border-style: solid; border-color: #103252 transparent transparent transparent; border-width: 100px 80px 0 80px; } #shieldDiamond { width: 0; height: 0; border: 75px solid transparent; border-bottom: 30px solid #103252; position: relative; top: -75px; } #shieldDiamond:after { content: ''; position: absolute; left: -75px; top: 30px; width: 0; height: 0; border: 75px solid transparent; border-top: 105px solid #103252; } |
Star (Five, Six, Eight, Twelve)
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 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | #five-star { width: 0px; height: 0px; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #103252; border-left: 100px solid transparent; /*transform*/ -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } #five-star:before { position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; border-bottom: 80px solid #103252; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; /*transform*/ -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); transform: rotate(-35deg); } #five-star:after { position: absolute; height: 0px; width: 0px; top: 3px; left: -105px; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #103252; border-left: 100px solid transparent; /*transform*/ -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); transform: rotate(-70deg); content: ''; } #six-star { width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 140px solid #103252; } #six-star:after { width: 0; height: 0; content: ""; position: absolute; border-left: 80px solid transparent; border-right: 80px solid transparent; border-top: 140px solid #103252; margin: 40px 0 0 -80px; } #eight-star { width: 140px; height: 140px; background: #103252; margin: 0 auto; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); } #eight-star:before { height: 140px; width: 140px; background: #103252; content: ""; position: absolute; margin: 0 auto; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } #twelve-star { height: 140px; width: 140px; background: #103252; } #twelve-star:before { height: 140px; width: 140px; background: #103252; content: ""; position: absolute; /* Rotate transform*/ -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } #twelve-star:after { height: 140px; width: 140px; background: #103252; content: ""; position: absolute; /* Rotate transform*/ -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } |
Enjoying this series? Let’s walk through to the next two articles.