Different Shapes using HTML & CSS3

In this blog, I will show you how to make different shapes in HTML with the help of CSS3.
Here I use different classes for different shapes.
Ex. for circle I took "circle" class.
CODE
  1. <html>
  2. <head>
  3. <title>design</title>
  4. <style>
  5. .rectangle
  6. {
  7. width:200px;
  8. height:100px;
  9. background-color:#0C9;
  10. text-align:center;
  11. font-size:30px;
  12. color:#90F;
  13. }
  14. .rounded
  15. {
  16. margin-top:10px;
  17. width:200px;
  18. height:100px;
  19. border-radius:30px;
  20. background-color:#0C9;
  21. text-align:center;
  22. font-size:28px;
  23. color:#90F;
  24. }
  25. .bottom
  26. {
  27. margin-top:10px;
  28. width:200px;
  29. height:100px;
  30. border-bottom-left-radius:50px;
  31. border-top-right-radius:50px;
  32. background-color:#0C9;
  33. text-align:center;
  34. font-size:30px;
  35. color:#90F;
  36. }
  37. .circle
  38. {
  39. margin-top:10px;
  40. width:150px;
  41. height:150px;
  42. border-radius:100px;
  43. background-color:#0C9;
  44. text-align:center;
  45. font-size:30px;
  46. color:#90F;
  47. }
  48. .triangle
  49. {
  50. margin-top:10px;
  51. width:0;
  52. height:0;
  53. border-bottom:120px solid #00CC99;
  54. border-left:60px solid transparent;
  55. border-right:60px solid transparent;
  56. text-align:center;
  57. font-size:30px;
  58. color:#90F;
  59. }
  60. .diamond
  61. {
  62. margin-top:30px;
  63. width:150px;
  64. height:150px;
  65. background-color:#0C9;
  66. -webkit-transform:rotate(45deg);
  67. -moz-transform:rotate(45deg);
  68. transform:rotate(45deg);
  69. text-align:center;
  70. font-size:30px;
  71. color:#90F;
  72. }
  73. .parallelogram
  74. {
  75. margin-top:30px;
  76. width:150px;
  77. height:100px;
  78. background-color:#0C9;
  79. -webkit-transform:skew(20deg);
  80. -moz-transform:skew(20deg);
  81. transform:skew(20deg);
  82. text-align:center;
  83. font-size:30px;
  84. color:#90F;
  85. }
  86. </style>
  87. </head>
  88. <body>
  89. <div class="rectangle">Rectangle</div>
  90. <div class="rounded">Rounded rectangle</div>
  91. <div class="bottom">bottom left & top right</div>
  92. <div class="circle">circle</div>
  93. <div class="triangle">triangle</div>
  94. <div class="diamond">diamond</div>
  95. <div class="parallelogram">parallelogram</div>
  96. </body>
  97. </html>