DEV Community

Discussion on: Join Me for 100 Days of Pure CSS

Collapse
 
dhruvgarg79 profile image
Dhruv garg

Hey it is really awesome how with only css you have build this awesome mouse.

I checked codePen and can't really understand this:
polygon(29% 83%, 28% 94%, 45% 80%, 44% 100%, 0 100%)

How do you figure out stuff like above?

Collapse
 
s_aitchison profile image
Suzanne Aitchison

I'll let you in on my secret... (whispers): bennettfeely.com/clippy/ 😄

I'm still really new to this, so I use clippy as a starting point, and then once I've got something going in the CodePen I start tweaking with the percentages. Honestly I found it easiest to start learning about clip-path that way too - once you have a live example in your editor, you can start tweaking the percentages and begin to see what those percentages actually mean in terms of what comes out in the UI.

There's so many great tools out there 😄

Collapse
 
waylonwalker profile image
Waylon Walker

This is a really cool tool. 😎

Collapse
 
dhruvgarg79 profile image
Dhruv garg

Thank you for telling us your secret :)

I didn't knew about clip-path and polygon in css. I have done very basic web front-end. But this example is really awesome. I will also try to make a small thing using it.

Thread Thread
 
s_aitchison profile image
Suzanne Aitchison

Yay! I'd be excited to see what you make 😁

Yeah in my normal front-end life I'd never need something like clip-path (or if I did it would be very very rare!) which is partly why I thought this might be a fun challenge 😁