Please, how do I achieve this border design?
I only need to know how to create that bottom right corner of the image.
10 Replies
I covered it in this video: https://youtu.be/aW6qEAQSctY
Kevin Powell
YouTube
Create borders with cut corners | fully responsive CSS and easy to ...
I was asked if we could make a button with cut corners, and it seemed like a fun challenge, and this is my solution! It involves a lot of custom properties and the setup is a little complex, but the custom properties make it easy to make changes down the line!
🔗 Links
✅ The code: https://codepen.io/kevinpowell/pen/bGLmORx
✅ How to pick units: ...
actually, looking at that design, the rounded cut corners are bit harder...
I used a clip-path in that video using a polygon... I'm wondering if you could do the same thing with a
clip-path: path() which would let you have a more complex path including round corners...
This is when I really wish that filter: drop-shadow() had a spread option, would make this a lot easier...These sorts of things might be awesome to try and do with Houdini. Not production ready yet, but getting closer everyday
https://jsnkuhn.github.io/corner-shape/ but honestly at the moment I'd suggest just making an svg to use as a
border-imageCSS corner-shape Paint API polyfill
A demo of what CSS corner-shape could be/do with the Paint API.
Thanks y'all, I'll try all these options out.
@kevinpowell thanks for the video, I really appreciate it ❤️
I could achieve the sharp corners now from @kevinpowell video.
But making them curved seems to be a hard nut to crack
using
clip-path with svg filter to make them rounded the problem is you cannot have a semi-transparent background-color https://codepen.io/petpeeve/pen/poQVMrB@iamcorizon okay, playing with some more filters I make the shape using a pseudoelement inside a wrapper and each fill and stroke is a different wrapper https://codepen.io/petpeeve/pen/yLQENRM
inpired by this https://css-tricks.com/gooey-effect/
Lucas Bebber
CSS-Tricks
The Gooey Effect | CSS-Tricks
The following is a post by Lucas Bebber. Lucas the originator of some of the most creative effects I've ever seen on the web. So much so I couldn't resist
the caveat is if you want to change the opacity of the fill/stroke color, you have to change the opacity on the wrapper, not on the pseudoelement the color in pseudoelement needs to be opaque to make the shape inside the filter stack
if you want to reduce opacity in a gradient, you have to use a mask on the wrapper
Thanks everyone ❤️ this will go a long way