water drop image affect react - css

Question

good afternoon everyone, due to the css room being empty i come here to ask you for support in relation to the css, i'm trying to make a water drop effect, but so far i haven't been able to do that ... will it be possible to show me the right way? I already tested SVG shape element and Clip Path (Mask) CSS, but I couldn't get the format ... the idea would be to apply this effect to an image ...
evry time i implemente the css the image rotates:
https://ibb.co/J3sVQyn
this is the code i'm using css and react call:
.CardComponent-media-4 {
width: 145px;
height: 169px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
flex-basis: 20%;
z-index: 50;
border-radius: 50%;
border-top: 145/2 ;
border-left: 145/2;
border-bottom: 145/2;
border-left: 145/2;
border-top-right-radius: 0;
transform: rotate(45deg);
}
<CardMedia image={imageUrl} title={title} className={classes.media} />

Answer 1

You are almost good, simply make the image rotate in the opposite direction by considering another element:
.box {
width:150px;
height:150px;
position:relative;
border-radius:50% 0 50% 50%;
margin:50px;
transform:rotate(-45deg);
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:-20%;
left:-20%;
right:-20%;
bottom:-20%;
background: center/cover;
background-image:inherit;
transform:rotate(45deg);
}
<div class="box" style="background-image:url(https://i.picsum.photos/id/1074/800/800.jpg)"></div>
Another idea using mask:
img {
width: 175px;
height: 200px;
-webkit-mask:
linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
-webkit-mask-repeat:no-repeat;
mask:
linear-gradient(to bottom right,transparent 48%,#fff 50%) 17% 0% /40% 40%,
linear-gradient(to bottom left ,transparent 48%,#fff 50%) 83% 0%/40% 40%,
radial-gradient(circle farthest-side at 50% 31%,#fff 90%,transparent 91%) bottom/100% 60%;
mask-repeat:no-repeat;
}
<img src="https://i.picsum.photos/id/1074/800/914.jpg" >