Hello, guys!
I’m trying to recreate this sharp corner idea from here and it works till I add the border.
How could I have the sharp corner with the border too?
Thank you!
Here is my site Read-Only: [LINK](https://preview.webflow.com/preview/project212?utm_medium=preview_link&utm_source=dashboard&utm_content=project212&preview=4c898e2534843cc93f098e45808f60e4&workflow=preview)
(how to share your site Read-Only link)
I could achieve the same result without custom code and only gradients, my main problem is the the stroke/border. I’ve saw that tutorial before I posted and it didn’t mention anything about the border.
I’m sorry if I may not understand the post enough, could you point exactly how to include the border too please? Thank you!
EDIT: Nevermind, I fixed it!
For anyone interested, I created a div block 30px x 30px (which will be the wrapper of the whole thing) - you can use any dimensions you want - with a gradient fill (that will contain the color of the border).
The gradient fill should look like this:
at 0% your preferred color with 100% transparency
at 90% your preferred color with 100% transparency
at 95% your preferred color with 0% transparency
at 100% your preferred color with 0% transparency
Lastly add a 225% degree angle to the gradient and you’re done with the border.
Then inside that border add a text block or a div block with the color of the background. Play with dimensions until everything fills in place exactly as the main div. For me 27px x 27px did the trick. Then use the same gradient values as before. That’s it.
For bigger divs you should probably adjust the gradient values like the 2 in between 0% and 100% should be set at 90% position one with 100% transparency, one with 0% transparency. See here: sharpcorner - Webflow
