Did you know you can use the CSS clip-path property to create any Shapes? Here is a thread to explain it most beginner-friendly way,

🧵 👇
The CSS clip-path helps to clip a region of an HTML element and show it. The outside of the clipped region is hidden.

See the image below. A circular region is clipped from a div of equal height and width. The circle is visible, and the rest is hidden.

👇 Image
There are 6 CSS functions to create shapes.

1. circle
2. inset
3. polygon
4. ellipse
5. A clip source using url()
6. path

You need an idea of the coordinate system to use the first 4 functions. It is easy. Just imagine an x and y-axis with an initial coordinate at (0,0).

👇 Image
1️⃣ circle() - Creates a circular shape.

We specify the position and radius of the circle using the circle() function.

clip-path: circle(70px at 70px 70px) creates a circle with a radius of 70px at the position coordinate (70, 70).

See, you get the full circular shape here
👇 Image
Alright, how do you get a quadrant of a circle now, say the bottom-left portion 🤔?

Here it is,

clip-path: circle(70px at 0 0)

Here we are creating a circle with a 70px radius at the (0, 0) coordinate. Hence only a portion is inside the visible clipped area. Bingo!!!

👇 Image
2️⃣ inset() - Creates a rectangular shape.

You can specify the top, right, bottom, and left offsets from the edges. Provide a border-radius value for curvy corners.

clip-path: inset(30px) creates a rectangular shape with 30px offset from the edges.

👇 Image
3️⃣ polygon() - Creates polygonal shape using a set of vertices.

You can go most creative with this function. Provide as many vertex positions as possible to create a shape of your choice.

A picture is worth of thousand words

👇 Image
4️⃣ ellipse() - Creates elliptical shapes using two radii and a position.

Here is an ellipse with 2 radii 70px and 100px respectively at the position (50%, 50%)

👇 Image
5️⃣ url() - provide the clip-path element’s ID as an argument to render an SVG shape.

Let's define a heart shape using SVG and clipPath. Now we can use the ID value of the clipPath element as an argument to the url() function to render this shape.

👇 Image
6️⃣ path() - We can use the path values directly in the path() to draw the shape.

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

👇 Image
Do you know, I've used the same knowledge to create something cool and open-sourced? Here is the story,

css-tricks.com/the-story-behi…

Learn more about CSS clip-path from here,

developer.mozilla.org/en-US/docs/Web…
Was it helpful? Would you please consider re-tweeting the thread 🙂?

#CSS #DEVCommunity

• • •

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

Keep Current with Tapas Adhikary

Tapas Adhikary 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!

PDF

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 @tapasadhikary

16 Sep
Why write a complex search logic to SEARCH & FILTER data at the client-side(browser) or Node.js environment?

Here are 8 free TOOLS/LIBRARIES to help you with that.

A Thread 🧵 👇 Image
1️⃣ WADE

- Light-Weight, 1KB
- Blazing Fast
- Search in your data by building a Query.
- Along with results, you also get the index of the items and the relevance score. Neat.
- MIT

👇

github.com/kbrsh/wade
2️⃣ FUSE

- Lightweight fuzzy-search
- Zero dependencies
- ES5-compliant
- Apache-2.0

👇

github.com/krisk/fuse
Read 11 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!

:(