CSS Geometric Shapes

Submitted by alpha_luna on Friday, April 8, 2016 - 16:42.
We all know that CSS stands for (Cascading Style Sheets). It can manage the layout of your multifarious web pages at once… And it saves a lot of jobs. In this tutorial, we are going to learn about on CSS Geometric Shapes. We can make it without using images. Most of them are draw using CSS. This is for the beginners. Hope you can learn from it. This is the example of Geometric Shapes:
  • Cone
  • Rectangle
  • Circle
  • Parallelogram
  • Oval
  • Trapezoid
  • Triangle Sided
  • Triangle

Cone

  1. .css_cone {
  2.   border-left: 100px solid transparent;
  3.   border-right: 100px solid transparent;
  4.   border-top: 100px solid red;
  5.   -moz-border-radius: 50%;
  6.   -webkit-border-radius: 50%;
  7.   border-radius: 50%;
  8. }
This is the result of the CSS code above: Cone

Rectangle

  1. .css_rectangle {
  2.    height: 100px;
  3.    width: 200px; 
  4.    background: orange;
  5. }
This is the result of the CSS code above: Rectangle

Circle

  1. .css_circle { 
  2.    width: 100px;
  3.    height: 100px;
  4.    background: skyblue; 
  5.    -moz-border-radius: 50px; 
  6.    -webkit-border-radius: 50px; 
  7.    border-radius: 50px;
  8. }
This is the result of the CSS code above: Circle

Parallelogram

  1. .css_parallelogram {
  2.    height: 75px;
  3.    width: 150px; 
  4.    background: blue;
  5.    -webkit-transform: skew(20deg); 
  6.    -moz-transform: skew(20deg); 
  7.    -o-transform: skew(20deg);
  8.    transform: skew(20deg);
  9. }
This is the result of the CSS code above: Parallelogram

Oval

  1. .css_oval {
  2. 	height: 200px;
  3. 	width: 100px;
  4. 	background: blue;
  5. 	-moz-border-radius: 50%;
  6. 	-webkit-border-radius: 50%;
  7. 	border-radius: 50%;
  8. }
This is the result of the CSS code above: Oval

Trapezoid

  1. .css_trapezoid {
  2. 	height: 0;
  3. 	width: 100px;
  4. 	border-bottom: 100px solid skyblue;
  5. 	border-left: 50px solid transparent;
  6. 	border-right: 50px solid transparent;
  7. }
This is the result of the CSS code above: Trapezoid Triangle Side 
  1. .css_triangle_side {
  2. 	height: 0;
  3. 	width: 0;
  4. 	border-top: 100px solid orange;
  5. 	border-right: 100px solid transparent;
  6. }
This is the result of the CSS code above: Triangle Side

Triangle

  1. .css_triangle {
  2. 	height: 0;
  3. 	width: 0;
  4. 	border-left: 50px solid transparent;
  5. 	border-right: 50px solid transparent;
  6. 	border-bottom: 100px solid red;
  7. }
This is the result of the CSS code above: Triangle

All source code:

HTML 
  1. <center>
  2. <table style="text-align:center; margin:50px;" cellpadding="5" cellspacing="5">
  3. 	<tr>
  4. 		<td>
  5. 			<div class="css_cone"></div>
  6. 		</td>
  7. 		<td>
  8. 			<div class="css_rectangle"></div>
  9. 		</td>
  10. 		<td>
  11. 			<div class="css_circle"></div>
  12. 		</td>
  13. 		<td>
  14. 			<div class="css_parallelogram"></div>
  15. 		</td>
  16. 	</tr>
  17. 	<tr>
  18. 		<td>
  19. 			<h3 style="color:red;">Cone</h3>
  20. 		</td>
  21. 		<td>
  22. 			<h3 style="color:orange;">Rectangle</h3>
  23. 		</td>
  24. 		<td>
  25. 			<h3 style="color:skyblue;">Circle</h3>
  26. 		</td>
  27. 		<td>
  28. 			<h3 style="color:blue;">Parallelogram</h3>
  29. 		</td>
  30. 	</tr>
  31. 	<tr>
  32. 		<td>
  33. 			<div class="css_oval"></div>
  34. 		</td>
  35. 		<td>
  36. 			<div class="css_trapezoid"></div>
  37. 		</td>
  38. 		<td>
  39. 			<div class="css_triangle_side"></div>
  40. 		</td>
  41. 		<td>
  42. 			<div class="css_triangle"></div>
  43. 		</td>
  44. 	</tr>
  45. 	<tr>
  46. 		<td>
  47. 			<h3 style="color:blue;">Oval</h3>
  48. 		</td>
  49. 		<td>
  50. 			<h3 style="color:skyblue;">Trapezoid</h3>
  51. 		</td>
  52. 		<td>
  53. 			<h3 style="color:orange;">Triangle Sided</h3>
  54. 		</td>
  55. 		<td>
  56. 			<h3 style="color:red;">Triangle</h3>
  57. 		</td>
  58. 	</tr>
  59. </table>
  60. </center>
CSS 
  1. <style type="text/css">
  2. .css_cone {
  3.   border-left: 100px solid transparent;
  4.   border-right: 100px solid transparent;
  5.   border-top: 100px solid red;
  6.   -moz-border-radius: 50%;
  7.   -webkit-border-radius: 50%;
  8.   border-radius: 50%;
  9. }
  10. .css_rectangle {
  11.    height: 100px;
  12.    width: 200px; 
  13.    background: orange;
  14. }
  15. .css_circle { 
  16.    width: 100px;
  17.    height: 100px;
  18.    background: skyblue; 
  19.    -moz-border-radius: 50px; 
  20.    -webkit-border-radius: 50px; 
  21.    border-radius: 50px;
  22. }
  23. .css_parallelogram {
  24.    height: 75px;
  25.    width: 150px; 
  26.    background: blue;
  27.    -webkit-transform: skew(20deg); 
  28.    -moz-transform: skew(20deg); 
  29.    -o-transform: skew(20deg);
  30.    transform: skew(20deg);
  31. }
  32. .css_oval {
  33. 	height: 200px;
  34. 	width: 100px;
  35. 	background: blue;
  36. 	-moz-border-radius: 50%;
  37. 	-webkit-border-radius: 50%;
  38. 	border-radius: 50%;
  39. }
  40. .css_trapezoid {
  41. 	height: 0;
  42. 	width: 100px;
  43. 	border-bottom: 100px solid skyblue;
  44. 	border-left: 50px solid transparent;
  45. 	border-right: 50px solid transparent;
  46. }
  47. .css_triangle_side {
  48. 	height: 0;
  49. 	width: 0;
  50. 	border-top: 100px solid orange;
  51. 	border-right: 100px solid transparent;
  52. }
  53. .css_triangle {
  54. 	height: 0;
  55. 	width: 0;
  56. 	border-left: 50px solid transparent;
  57. 	border-right: 50px solid transparent;
  58. 	border-bottom: 100px solid red;
  59. }
  60. </style>
And, this is the example of Geometric Shapes Using CSS and you can create more abstract shapes when you blend this kind of example. Share us your thoughts and comments below. Thank you so much for dropping by and reading this blog post. For more updates, don’t hesitate and feel free to visit our website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you.

Tags

Add new comment

About text formats
  • 1133 views