CSS Shapes Tutorials
6 March, 2014
No Comments
While I was slithering around the web I discovered this suitable post from the place that is known for the web about utilizing Css3 to make some basic css shapes tutorials. You can see the trick sheet here.
I began utilizing this trick sheet to make a few css shapes tutorials for website pages. Anyway the issue with utilizing a trick sheet is that you need to do a reversal and sort in the CSS each one time, so I make this page to effectively duplicate and glue the CSS so I can rectify the css shapes effortlessly.
Easter Egg
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#egg { display:block; width:126px; /* width has to be 70% of height */ /* could use width:70%; in a square container */ height:180px; background-color:green; /* beware that Safari needs actual px for border radius (bug) */ -webkit-border-radius:63px 63px 63px 63px/ 108px 108px 72px 72px; /* fails in Safari, but overwrites in Chrome */ border-radius:50% 50% 50% 50%/60% 60% 40% 40%; } |
Triangle
|
1 2 3 4 5 6 7 8 |
#eq-triangle { width: 0; height: 0; border-bottom: 104px solid navy; /* 104 = 120 * 0.866 */ border-left: 60px solid transparent; border-right: 60px solid transparent; } |
Pac Man
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.pacman { width: 0px; height: 0px; border-right: 60px solid transparent; border-top: 60px solid yellow; border-left: 60px solid yellow; border-bottom: 60px solid yellow; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; } |
Bio Hazard
|
1 2 3 4 5 6 7 8 9 10 11 |
.biohazard { width: 0; height: 0; border-bottom: 60px solid black; border-top: 60px solid black; border-left: 60px solid yellow; border-right: 60px solid yellow; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; } |
Heart
|
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 |
#heart { position: relative; } #heart:before, #heart:after { position: absolute; content: ""; left: 70px; top: 0; width: 70px; height: 115px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } |
Triangle Top Left
|
1 2 3 4 5 6 |
#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } |
Triangle Top Right
|
1 2 3 4 5 6 7 |
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; } |
Triangle Bottom Left
|
1 2 3 4 5 6 |
#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; } |
Triangle Bottom Right
|
1 2 3 4 5 6 |
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent; } |
Curve Darrow
|
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 |
#curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); } #curvedarrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } |
Star Five
|
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 |
#star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #star-five:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #star-five:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; } |
Hexagon
|
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 |
#hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } #hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; } |
Infinity
|
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 |
#infinity { position: relative; width: 212px; height: 100px; } #infinity:before, #infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } |
Diamond Shield
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#diamond-shield { width: 0; height: 0; border: 50px solid transparent; border-bottom: 20px solid red; position: relative; top: -50px; } #diamond-shield:after { content: ''; position: absolute; left: -50px; top: 20px; width: 0; height: 0; border: 50px solid transparent; border-top: 70px solid red; } |
Cut Diamond
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#cut-diamond { border-style: solid; border-color: transparent transparent red transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; } #cut-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: red transparent transparent transparent; border-width: 70px 50px 0 50px; } |
Yin Yang
|
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 |
#yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid red; border-radius: 100%; width: 12px; height: 12px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: red; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; } |
Badge Ribbon
|
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 |
#badge-ribbon { position: relative; background: red; height: 100px; width: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } #badge-ribbon:before, #badge-ribbon:after { content: ''; position: absolute; border-bottom: 70px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; top: 70px; left: -10px; -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); -ms-transform: rotate(-140deg); -o-transform: rotate(-140deg); } #badge-ribbon:after { left: auto; right: -10px; -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); -ms-transform: rotate(140deg); -o-transform: rotate(140deg); } |
Space Invader
|
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 |
#space-invader{ box-shadow: 0 0 0 1em red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, -3em -3em 0 0 red, 3em -3em 0 0 red, -2em -2em 0 0 red, 2em -2em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 2em -1em 0 0 red, 3em -1em 0 0 red, -4em 0 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red, -5em 1em 0 0 red, -4em 1em 0 0 red, 4em 1em 0 0 red, 5em 1em 0 0 red, -5em 2em 0 0 red, 5em 2em 0 0 red, -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red, -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red; background: red; width: 1em; height: 1em; overflow: hidden; margin: 50px 0 70px 65px; } |
TV
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#tv { position: relative; width: 200px; height: 150px; margin: 20px 0; background: red; border-radius: 50% / 10%; color: white; text-align: center; text-indent: .1em; } #tv:before { content: ''; position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%; background: inherit; border-radius: 5% / 50%; } |
Chevron
|
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 |
#chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px; } #chevron:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: red; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: red; -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }​ |
Magnifying Glass
|
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 |
#magnifying-glass { font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em; } #magnifying-glass::before { content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } |
Circle
|
1 2 3 4 5 6 7 8 |
#circle { width: 140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; } |
Square
|
1 2 3 4 5 |
#square { width: 140px; height: 140px; background: blue; } |
Oval
|
1 2 3 4 5 6 7 8 |
#oval { width: 200px; height: 100px; background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } |
Up Triangle
|
1 2 3 4 5 6 7 |
#up-triangle { width: 0; height: 0; border-bottom: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; } |
Down Triangle
|
1 2 3 4 5 6 7 |
#down-triangle { width: 0; height: 0; border-top: 80px solid pink; border-left: 60px solid transparent; border-right: 60px solid transparent; } |
Left Triangle
|
1 2 3 4 5 6 7 |
#left-triangle { width: 0; height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; } |
Right Triangle
|
1 2 3 4 5 6 7 |
#right-triangle { width: 0; height: 0; border-left: 100px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; } |
Trapezium
|
1 2 3 4 5 6 7 |
#trapezium { height: 0; width: 80px; border-bottom: 80px solid blue; border-left: 40px solid transparent; border-right: 40px solid transparent; } |
Diamond
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#diamond { width: 80px; height: 80px; background: purple; margin: 3px 0 0 30px; /* 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%; } |
Rectangle
|
1 2 3 4 5 |
#rectangle { width: 140px; height: 80px; background: green; } |
Parallelogram
|
1 2 3 4 5 6 7 8 9 10 |
#parallelogram { width: 130px; height: 75px; background: pink; /* Skew */ -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); transform: skew(20deg); } |
Twelve Point Star
|
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 |
#twelve-point-star { height: 100px; width: 100px; background: orange; position: absolute; } #twelve-point-star:before { height: 100px; width: 100px; background: orange; content:""; position: absolute; /* Rotate */ -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } #twelve-point-star:after { height: 100px; width: 100px; background: orange; content:""; position: absolute; /* Rotate */ -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } |
Six Point Star
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#six-point-star { position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 80px solid red; } #six-point-star:after { content:""; position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 80px solid red; margin: 30px 0 0 -50px; } |
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 |
#octagon { width: 100px; height: 100px; background: blue; } #octagon:before { height: 0; width: 40px; content:""; position: absolute; border-bottom: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; } #octagon:after { height: 0; width: 40px; content:""; position: absolute; border-top: 30px solid blue; border-left: 30px solid white; border-right: 30px solid white; margin: 70px 0 0 0; } |
Speech Bubble
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#speech-bubble { width: 120px; height: 80px; background: purple; position: absolute; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #speech-bubble:before { content:""; position: absolute; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid purple; border-bottom: 13px solid transparent; margin: 13px 0 0 -25px; } |
