Post
Ask Question

Different Shapes using HTML & CSS3

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>  
Next Recommended Reading The Different Types of Storage in HTML 5