How to create shapes using CSS ?
In this article, we will design some different types of shapes using CSS. CSS is capable of making all types of shapes.
- Creating a square:
html
<!-- Write HTML code here --><!DOCTYPE html><html><head> <style> .square { height: 50px; width: 50px; background-color: green; } </style></head><body> <div class="square"></div></body></html> |
Output:
- Creating Triangle
- Upward:
- Upward:
html
<!-- Write HTML code here --><!DOCTYPE html><html><head> <style> .triangle { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid green; } </style></head><body> <div class="triangle"></div></body></html> |
Output:
- Downward:
html
<!-- Write HTML code here --><!DOCTYPE html><html><head> <style> .triangle { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 50px solid green; } </style></head><body> <div class="triangle"></div></body></html> |
Output:
- Creating a circle:
html
<!-- Write HTML code here --><!DOCTYPE html><html><head> <style> .circle { height: 70px; width: 70px; background-color: green; border-radius: 50%; } </style></head><body> <div class="circle"></div></body></html> |
Output:
- Creating a rectangle:
html
<!-- Write HTML code here --><!DOCTYPE html><html><head> <style> .rectangle { height: 50px; width: 80px; background-color: green; } </style></head><body> <div class="rectangle"></div></body></html> |
Output:
- Creating a parallelogram:
html
<!-- Write HTML code here --><!DOCTYPE html><html><head> <style> .parallelogram { width: 120px; height: 60px; transform: skew(24deg); background: green; } </style></head><body> <div class="parallelogram"></div></body></html> |
- Output:
- Creating oval:
HTML
<!-- Write HTML code here --><!DOCTYPE html><html><head> <style> .oval { height: 200px; width: 400px; border-radius: 50%; background-color: green; } </style></head><body> <div class="oval"></div></body></html> |
- Output:
Please Login to comment...