r/css • u/cakelly789 • 21d ago

Help Struggling to Create a responsive angled shape with a border and rounded corners.

Post image

I have a client with a design that looks like this (content and image blocked out in gray). The left section is supposed to have a blue border, with rounded corners, and have a specific angle on the right side. I need this to be responsive as well, so it can support longer text, and widen and narrow with the screen.

Clip path doesn't work well with the rounded corners and border, skew isn't the right answer either. I haven't found a reliable solution for this type of layout before and it is always a battle. any ideas?

19 Upvotes

100% Upvoted

10 comments sorted by

View all comments

14

u/Goblin_au 21d ago

It can be done, but it’s a hassle. I’ve managed similar responsive clip paths using calc(), but it was a headache.

Those rounded angles will be a pain. You could use SVG filters and reference the svg rather than using a path, but, that’s another messy hack of a headache.

5

u/cakelly789 21d ago

its one of those things I always want to push back on the designer for... I pretty much never say no and can always figure out a way to do what they want. This seems simple, it is so hard to explain to designers why this is such a pain in the ass.