溢出隐藏在底部仅适用于复杂形状的图像

Question

我正在尝试将图像放在一个复杂的形状中，并且仅在顶部不隐藏溢出。使用边框半径创建形状：

shape: {
  backgroundColor: '#FFF',
  width: 500,
  height: 500,
  borderRadius: '70% 30% 30% 70% / 60% 40% 60% 40%',
  position: 'relative',
  marginTop: 200,
  paddingTop: 200,
  overflow: 'hidden'
},

<div class="shape">
  <div>
    <img src="path/to/image" alt="my-image" />
  </div>
</div>

我正在使用 React 的视差效果，所以我不会上传所有代码，但有 2 张图片展示我想要得到的东西：

Answer 1

使用两个元素构建它并使用 z-index

.shape {
  background-color: #FFF;
  width: 500px;
  margin:200px 20px;
  height: 500px;
  position: relative;
  z-index:0;
}
.shape:before,
.shape:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
  box-shadow:0 0 0 100vmax blue;
  clip-path:inset(50% -100vmax -100vmax); /* cut the top */
  z-index:1;
}
.shape:after {
  clip-path:inset(-100vmax -100vmax 50%); /* cut the bottom */
  z-index:-1;
}

img {
  position:fixed;
  margin-left:50px;
  margin-top:-100px;
}

body {
  min-height:200vh;
}

<div class="shape">
    <img src="https://picsum.photos/id/1074/300/600" alt="my-image" >
</div>

溢出隐藏在底部仅适用于复杂形状的图像

overflow hidden on the bottom only for an image in a complex shape

html

css

user-experience