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
Kevin Powell
Kevin Powell16mo ago
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: ...
Kevin Powell
Kevin Powell16mo ago
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...
Wouter Schaap
Wouter Schaap16mo ago
These sorts of things might be awesome to try and do with Houdini. Not production ready yet, but getting closer everyday
capt_uhu
capt_uhu16mo ago
https://jsnkuhn.github.io/corner-shape/ but honestly at the moment I'd suggest just making an svg to use as a border-image
CSS corner-shape Paint API polyfill
A demo of what CSS corner-shape could be/do with the Paint API.
Corizon
Corizon16mo ago
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
phyrasaur
phyrasaur16mo ago
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
phyrasaur
phyrasaur16mo ago
@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
phyrasaur
phyrasaur16mo ago
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
phyrasaur
phyrasaur16mo ago
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
Corizon
Corizon16mo ago
Thanks everyone ❤️ this will go a long way
Want results from more Discord servers?
Add your server