14 Replies
This looks like something a designer would make that doesn't understand the limitations of the web π
My first attempt would be a pseudo-element with a clip-path... not sure what my second attempt would be if that didn't work π
Be a lot easier if it didn't have the gradient
Haha... Yeah π... But I'll try to create it using pseudo-element
As long as teh border-radius is small enough, clip-path works. If you have a larger border-radius, it's more obvious that the clip path is square.
https://codepen.io/kevinpowell/pen/rNoOYKX?editors=1100
Wow... Thanks a lot @kevinpowell π
Impressive!!
@parth7 a pseudo element positioned behind the button with a
top and left offset should work if the clip path that Kevin mentioned doesn't work for you@snxxwyy he has already provided a solution and it works
I know, I saw, that's why I mentioned if his didn't work for your situation. Just trying to help man.
Oh... Cool π.. thanks
Yeah no worries
@parth7 it's useful to have knowledge of multiple solutions to these things just in case one doesn't work in all cases. For example I didn't know you could use a clip path for this, so Kevin helped me out here.
If you'd like to avoid the big
clip-path you can accomplish the same thing with mask-composite: https://codepen.io/jsnkuhn/pen/KKbdQOQ?editors=0100I tried exactly this and it didn't work for me... Now I gotta see what we did differently π
I had this instead, but it didn't work... but now that I'm doing it on yours, it's working... I wish I kept the non-functional version so I could compare
I tried and now it worked, so I must have done something stupid.
I was wondering why you didn't use a border image until I tried it myself and discovered that border radius doesn't work with border images.
There's a
mask-border (hopefully by the end of the year Firefox will support this - it's part of interop2023) take on this in the "make border-image and border-radius work together" thread I made in the csswg github: https://github.com/w3c/csswg-drafts/issues/7550#issuecomment-1304903650