Achieving Design with Clip-Path: Seeking Guidance and Troubleshooting Gradient Borders
Could someone offer guidance on achieving the design I'm aiming for? I'm encountering an issue with clip-path where border-radius doesn't seem to work properly, particularly with gradient borders and backgrounds. Here's the link to the CodePen for reference: https://codepen.io/Amit-Soni-the-vuer/pen/dyLmQdj
4 Replies
think this will be easier with a -45 deg skew on the button and an overflow hidden on the main element. width a span inside the button you can skew the content back
Hi, thank you for your assistance—it worked! I have a question: how can I achieve the background gradient effect and border gradient effect? As far as I know, applying gradient to the background and border isn't working as expected. I want to achieve as above image. Here's the link to the CodePen for reference with updated code:https://codepen.io/Amit-Soni-the-vuer/pen/dyLmQdj
you'll have to play a bit with the values
https://codepen.io/MarkBoots/pen/qBwoGbd
I comprehend. Grateful for your direction.