I need to create an image in a rounded triangle with blurred box shadow.
I try to do this with a clip path from an svg. I found some help in this old thread but i can't manage to change the radius of the corners. Is there any easy way to solve this? I tried to replicate it with Inkscape but without any succes so far.
Example I need to make: Link to example screenshot
What i have so far:
.image-shape {display:block;width:300px;height:300px;background-position:center;clip-path:url(#clip);-webkit-clip-path:url(#clip);}<svg height="0" width="0" class="svg-clip" style="position:absolute">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M1,.21 Q1,0 .81,.09L.187,.4 Q0,.5 .187,.59L.81,.90 Q1,1 1,.79Z" />
</clipPath>
</defs>
</svg>
<div class="image-shape" style="background-image:url(https://images.freeimages.com/images/large-previews/1c1/links-1242361.jpg)"></div>