Let's create some easy and complex shapes using pure CSS π¨
A Thread π§΅
A Thread π§΅
1. Circle
- Pretty simple, we just need to make a square and apply the border-radius 50% in order to give it a circular shape
- Pretty simple, we just need to make a square and apply the border-radius 50% in order to give it a circular shape
2. Semi-circle
- Create a rectangle
- Apply border radius top left and top right same as height of the rectangle
- Create a rectangle
- Apply border radius top left and top right same as height of the rectangle
3. Triangle
- Creating a triangle is little bit tricky
- Set height and width as zero
- To make this, we draw a solid border and make the side border transparent
- Creating a triangle is little bit tricky
- Set height and width as zero
- To make this, we draw a solid border and make the side border transparent
4. Trapezium
- Same as triangle but in this case we need to set some width
- Same as triangle but in this case we need to set some width
5. Parallelogram
- Create a rectangle
- Apply skew in order to tilt it
- Create a rectangle
- Apply skew in order to tilt it
6. Hexagon
- Creating hexagon is very easy
- We need to make two trapeziums of same size but make sure that other trapezium should be upside down
- Align them perfectly
- Creating hexagon is very easy
- We need to make two trapeziums of same size but make sure that other trapezium should be upside down
- Align them perfectly
7. Leaf
- Create a square
- Apply larger border-radius at top-left and bottom-right corner
- Create a square
- Apply larger border-radius at top-left and bottom-right corner
8. Drop
- Create a square
- Apply 50% border-radius to all the sides except one side
- Rotate in such a manner so that tip comes to top
- Create a square
- Apply 50% border-radius to all the sides except one side
- Rotate in such a manner so that tip comes to top
9. Heart
- Create a rectangle and apply circular border at top
- Rotate it 45deg
- Create another same rectangle with circular border and rotate in 45deg in other direction
- Align both of them
- Create a rectangle and apply circular border at top
- Rotate it 45deg
- Create another same rectangle with circular border and rotate in 45deg in other direction
- Align both of them
10. Star
- Create two triangle upside down
- Align second triangle in the middle of the first one
- Create two triangle upside down
- Align second triangle in the middle of the first one
11. Diamond
- Combination of Trapezium and triangle
- Combination of Trapezium and triangle
12. Moon
- Transparent background
- Apply box shadow
- Transparent background
- Apply box shadow
13. Cross
- Create two rectangles
- Place them over each other vetically and horizontally
- Rotate 45deg
- Create two rectangles
- Place them over each other vetically and horizontally
- Rotate 45deg
14. Egg
- Using advance border-radius technique
- Using advance border-radius technique
I hope you will find it helpful, if so, share itβ€οΈ
Peace out π
Peace out π
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
