CSS Geometric Shapes

Submitted by: 
Language: 
Visitors have accessed this post 346 times.

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:

style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-3664195971165750"
data-ad-slot="8323940646">

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. <table style="text-align:center; margin:50px;" cellpadding="5" cellspacing="5">
  2. <tr>
  3. <td>
  4. <div class="css_cone"></div>
  5. </td>
  6. <td>
  7. <div class="css_rectangle"></div>
  8. </td>
  9. <td>
  10. <div class="css_circle"></div>
  11. </td>
  12. <td>
  13. <div class="css_parallelogram"></div>
  14. </td>
  15. </tr>
  16. <tr>
  17. <td>
  18. <h3 style="color:red;">Cone</h3>
  19. </td>
  20. <td>
  21. <h3 style="color:orange;">Rectangle</h3>
  22. </td>
  23. <td>
  24. <h3 style="color:skyblue;">Circle</h3>
  25. </td>
  26. <td>
  27. <h3 style="color:blue;">Parallelogram</h3>
  28. </td>
  29. </tr>
  30. <tr>
  31. <td>
  32. <div class="css_oval"></div>
  33. </td>
  34. <td>
  35. <div class="css_trapezoid"></div>
  36. </td>
  37. <td>
  38. <div class="css_triangle_side"></div>
  39. </td>
  40. <td>
  41. <div class="css_triangle"></div>
  42. </td>
  43. </tr>
  44. <tr>
  45. <td>
  46. <h3 style="color:blue;">Oval</h3>
  47. </td>
  48. <td>
  49. <h3 style="color:skyblue;">Trapezoid</h3>
  50. </td>
  51. <td>
  52. <h3 style="color:orange;">Triangle Sided</h3>
  53. </td>
  54. <td>
  55. <h3 style="color:red;">Triangle</h3>
  56. </td>
  57. </tr>

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.


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.