Pratham Profile picture
20 Apr, 25 tweets, 11 min read
Let's create 22 shapes and figures using pure CSS 🎨

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
2. Semi-circle 🌓

- 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
4. Trapezium 📐

- 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
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
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
8. Diamond 💎

- Combination of Trapezium and triangle
9. Cross ❌

- Create two rectangles
- Place them over each other vetically and horizontally
- Rotate 45deg
10. Egg 🥚

- Using advance border-radius technique
11. Star 🌟

- Create two triangle upside down
- Align second triangle in the middle of the first one
12. Moon 🌜

- Transparent background
- Apply box shadow
13. Coffee ☕ .coffee {   position: relative;   background: black;   heigh
14. Infinity Symbol ♾️

It may look tough but trust me I created this symbol using border-radius only
15. Arrow ➡️

Combination of rectangle and a triangle
16. Star ⭐

Combination of two triangles
17. Magnifying glass 🔍

You guessed it right! Its just a simple circle and small rectangle
18. Heart ❤️

- Two rectangles with top round border-radius
19. Pacman
20. 8 Point Star 🌟

Two squares overlapping each other
21. Pentagon ✒

- Create a trapezium
- Create a triangle
- Merge them both     .pentagon {       position: relative;       width: 100px
22. Leaf 🍀

- Just the matter or border-radius .leaf {   height: 200px;   width: 200px;   background: black
I hope you will find it helpful, if so, share it ❤️

Peace out 😉
In general, these shapes or CSS arts are of no use in practical terms, but

- It can increase your CSS learning process up to 10 times 🚀
- Helps you build better understanding 🤯

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Pratham

Pratham Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

22 Apr
Start your web development journey with this thread

🧵👇 Image
Getting started with web development is little tricky and tedious. I personally faced some difficulties when I was first learning it.

But you don't have to worry. In this thread we will make the process easier

{ 2 / 29 }
Web development is a vast field but mainly revolves around 3 different technologies.

HTML, CSS and JavaScript

You need to learn these 3 things in a chronological order. You can gain decent amount of web dev knowledge in 100 days. Lets see how 👇🏻

{ 3 / 29 } Image
Read 29 tweets
22 Apr
Which programming language should I learn?

Well it depends on what you want to be.

1. C

🔸Database systems
🔸Graphics packages
🔸Word processors
🔸Spread sheets
🔸Operating system development
🔸Compilers and Assemblers
🔸Network drivers
2. C++

🔸GUI Based Applications
🔸Database Software
🔸Operating Systems
🔸Advanced Computation And Graphics
🔸Cloud/Distributed System
🔸Banking Applications
Read 7 tweets
21 Apr
15 amazing websites that will change your way of coding

• online tool to learn, build & test Regular Expressions
• JavaScript game
• Search anything here and it will show you the correct roadmap with all the necessary resources
• Code review as a service by expert engineers
• Syntax validators, code formatters, testers, HTTP clients, mock server, but also a SQLite browser
• Code, create, and learn together
Read 8 tweets
21 Apr
My handwritten Web Development notes ✍️

1. CSS selectors ☑️ Image
2. Some important CSS Pseudo classes 🔯 Image
Read 25 tweets
20 Apr
6 amazing GitHub repositories for every programmer

1️⃣ Awesome-Linux-Software

A list of awesome applications, software, tools and other materials for Linux distros.

14.8K ⭐
1.6K 🍴

2️⃣ Free-Python-Books

Python books free to read online or download

1.9K ⭐
208 🍴

Read 7 tweets
19 Apr
You can learn 90% of CSS using these 10 threads

2. Getting started with CSS animations 🚗

Read 14 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!