时间戳

首页 > 解决方案 > 水滴图像影响反应

css - 水滴图像影响反应

问题描述

大家下午好，由于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} />

标签： cssreact-nativematerial-ui

解决方案

你几乎很好，只需通过考虑另一个元素使图像向相反方向旋转：

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

推荐阅读