Are you planning to create your first CSS art for fun? Start with the basic shapes.
Here are 26 easy to hard shapes and figures you can try first π§΅ππ»
Here are 26 easy to hard shapes and figures you can try first π§΅ππ»
In general, analyze any image and try to think how can you make it using different shapes.
Two concepts that you need to master
1. border-radius
2. linear-gradient
Two concepts that you need to master
1. border-radius
2. linear-gradient
1. Circle Yellow π΅
- 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 First π
- Create a rectangle
- Apply border-radius top left and top right same as the height of the rectangle
- Create a rectangle
- Apply border-radius top left and top right same as the 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 a triangle but in this case we need to set some width
- Same as a 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 a hexagon is very easy
- We need to make two trapeziums of the same size but make sure that the other trapezium should be upside down
- Align them perfectly
- Creating a hexagon is very easy
- We need to make two trapeziums of the same size but make sure that the other trapezium should be upside down
- Align them perfectly
7. 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
8. Diamond π
- Combination of Trapezium and triangle
- Combination of Trapezium and triangle
9. Cross β
- Create two rectangles
- Place them over each other vertically and horizontally
- Rotate 45deg
- Create two rectangles
- Place them over each other vertically and horizontally
- Rotate 45deg
10. Egg π₯
- Using an advanced border-radius technique
- Using an advanced border-radius technique
11. Star Glowing π
- Create two triangle upside down
- Align the second triangle in the middle of the first one
- Create two triangle upside down
- Align the second triangle in the middle of the first one
12. Moon π
- Transparent background
- Apply box-shadow
- Transparent background
- Apply box-shadow
13. Coffee β
14. Heart β€οΈ
- Two rectangles with top round border-radius
- Two rectangles with top round border-radius
15. Infinity βΎοΈ
It may look tough but trust me I created this symbol using border-radius only
It may look tough but trust me I created this symbol using border-radius only
16. Arrow βΆοΈ
Combination of the rectangle and a triangle
Combination of the rectangle and a triangle
17. Star β
Combination of two triangles
Combination of two triangles
18. Magnifying glass π
You guessed it right! It's just a simple circle and small rectangle
You guessed it right! It's just a simple circle and small rectangle
19. Pacman
20. 8 Point π
Two squares overlapping each other
Two squares overlapping each other
21. Pentagon β
- Create a trapezium
- Create a triangle
- Merge them both
- Create a trapezium
- Create a triangle
- Merge them both
22. Leaf π
- Just the matter or border-radius
- Just the matter or border-radius
23. Yin and Yang
Looks tough but actually, it is not
Looks tough but actually, it is not
24. Mobile Phone π±
25. Headphones π§
26. Spectacles π
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
