CSS One corner shorter with image

user_5157408 0
Viewed 49

I try to achieve this shape with images and responsive

enter image description here

I saw all answers on the forum but none suit me

Actually my closest is with border radius : (border-radius:10% 10% 10% 100% / 35% 35% 35% 52%)

I also tried with clip path (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 79%);) but can't handle the radius part with polygon

Any ideas to achieve this ?

css
1 Answers

SVG combined with clip-path can do it. update the stdDeviation to control the radius

img {
  clip-path: polygon(0 0,100% 0,100% 100%, 0 calc(100% - 50px));
}

.box {
  display:inline-grid;
  filter: url('#goo');
}
<div class="box">
 <img src="https://picsum.photos/id/1069/400/300">
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

SVG filter taken from https://css-tricks.com/gooey-effect/

user_86203330
Related