DEV Community

Discussion on: CSS Shapes with rounded corners

Collapse
 
any_formless profile image
Granted Land • Edited

Hi Temani. Great article, thanks!
There is only one issue, this feGaussianBlur filter that rounds the corners removes text from the div to which it's applied.
For me it removed the text from my div. But the text is visible if it's selected.
If there would be text inside these shapes, I think the filter would remove the text. Is that right?
Could you suggest a fix for that?

Collapse
 
afif profile image
Temani Afif

you should not add any content inside the shape, use the shape as a layer alone and put your content inside another layer on the top of it. Basically 2 divs above each other.

Collapse
 
any_formless profile image
Granted Land • Edited

I am not able change the HTML.
It's a div that outputs my post intro text, that is inputted from the WP backend.
I just added the before element to that div.
The div has a clip path applied, and I am successfully rounding its corners with your code, but the text from the div it's gone. But it's still there, it can be selected.
In this case, do you have a recommendation?

Thread Thread
 
afif profile image
Temani Afif

You need to make the content outside. This is the only solution. The text should not be inside the div where you apply the filter