Learn CSS
787 subscribers
212 photos
5 videos
32 files
512 links
All info and tutorial of CSS
https://bio.link/learncss
For HTML: @html_web_learn
For CSS: @CSS_web_learn
For JS: @JavaScript_js_learn
For PHP: @learn_php_web
For Programming courses @Programmingworld_dev
For CEH,Cybersec: @CyberPunk_anonymous
Download Telegram
Semi-circle

- Create a rectangle
- Apply border radius top left and top right same as height of the rectangle .
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
Trapezium

- Same as triangle but in this case we need to set some width
Parallelogram

- Create a rectangle
- Apply skew in order to tilt it
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
Leaf

- Create a square
- Apply larger border-radius at top-left and bottom-right corner
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
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
Star

- Create two triangle upside down
- Align second triangle in the middle of the first one
Merge three lines of CSS into one
CSS border-style cheat sheet