one sided slanted button
Whats the cleanest way to achieve this design? I want to be able to make it responsive no matter how tall the button is.
13 Replies
I would have thought that clip-path would be the simplest method.
it is the cleanest way
something like this:
clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
i generated it with one of those generic clip-path generatorsOhhh got it, do I apply these to pseudo elements?
you apply that to the button itself to clip it's shape
Ohhhh, awesome, can you tell me what site did you use to generate?
do you use*
polygon clip-paths are actually relatively simple to define. You just define a series of points along the X and Y axis, using whatever unit you prefer, to define where the path should go. I tend to start from the top left corner which would be "0,0" and then move round clockwise.
So, to fit your blue button, you would actually need to start slightly in along the x axis but at the top, for example,
10% 0%.
You would then move to each corner as the rest of the points don't need to clip anything so:
top-right = 100% 0%
bottom-right = 100% 100%
bottom-left = 0% 100%
Once you finish defining the points the path will automatically close back to your first point, in this case "10% 0%".
Each of the point groups (x & y) is separated by a coma.
In this case, your path would be: 10% 0%, 100% 0%, 100% 100%, 0% 100%
Putting this all together, you would have:
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
Alternatively you can use a generator like https://bennettfeely.com/clippy/ 😆 but I think that it does help to understand what the values actually mean.
a generic forgettable one
literally google "clip-path generator" and you will find one of many generic ones
Wow, thanks so much for the details and explanation, not only did it solve my problem but gained good understanding as well, thank you.
Glad to be able to help 👍 .
Understanding clip-paths can be quite useful and, once you get your head round the idea of defining a series of points.
You can even animate them, just remember to have the same number of points in all of the animation states to have a fluid transition.
https://codepen.io/cbolson/pen/mdZabxX
Just wanna add, Firefox dev tools has a clip path editor where you can actually adjust the points visually in the page/element you’re working on, then copy what it outputs and paste it into your code. You may need to adjust some numbers to whole values , eg you probably want 80% not 79.9999999999999999 , and with the tool it can hard to get precise but it’s easy to update those manually when you bring them back into your code .
and the editor is decent enough
Thank you so much, once again. This helped and taught me.