水滴图像影响反应

Question

大家下午好，由于css房间是空的，所以我来这里向你们寻求css方面的支持，我正在尝试制作水滴效果，但到目前为止我还没有做那......是否有可能向我展示正确的方式？我已经测试了 SVG 形状元素和剪辑路径（蒙版）CSS，但我无法获得格式……我的想法是将这种效果应用于图像…… 每次我实现图像旋转的CSS时： https://ibb.co/J3sVQyn

这是我使用 css 和 react 调用的代码：

.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

你差不多好了，只需考虑另一个元素，使图像向相反方向旋转：

.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>

另一个使用面具的想法：

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" >