htmlcsssvg

How to Create an SVG Shape with Rounded Corners and an Indented Bottom-Right Corner


I need help creating a specific SVG shape for my UI design, but I'm struggling to get it right with just CSS or SVG path code.

Here's what I'm looking for:

A rectangle with rounded corners. The bottom-right corner should have an indentation, almost like a rounded cut-out or an inward curve, instead of the standard rounded edge. Ideally, I’d like to apply a blur or backdrop filter within this shape so it affects only the area inside the shape, without blurring the entire container.

Can someone help me create an SVG path that achieves this effect? Or suggest a way to apply a backdrop filter within a specific SVG shape? Any advice or examples would be greatly appreciated!

Thank you in advance! enter image description here

I've tried using CSS border-radius and clip-path but can't seem to get the exact indented corner effect I want. I also experimented with SVG, but my attempts with path commands haven’t produced the desired shape.


Solution

  • Using SVG Path (see here) :

    <svg width="300" height="230" xmlns="http://www.w3.org/2000/svg">
        <path d="m 100 0 h 180 a 20 20 0 0 1 20 20 v 150 a 10 10 0 0 1 -10 10 h -20 a 20 20 0 0 0 -20 20 v 20 a 10 10 0 0 1 -10 10 h -220 a 20 20 0 0 1 -20 -20 v -190 a 20 20 0 0 1 20 -20 z"/>
    </svg>
    

    SVG Path render

    You might take a look at how SVG path work.

    You may use the website above to create SVG path ; or similar tools such as Inkscape like @hannu suggested