如何使用剪辑路径在图像中设置形状

【问题标题】：How to set shape in image with clip-path如何使用剪辑路径在图像中设置形状
【发布时间】：2020-10-23 10:41:02
【问题描述】：

是否可以将图像设置为与clip-path css 相同的形状。

原图

带有 css 的预期图像

【问题讨论】：

分享你的尝试
看起来你想要的形状可以用clip-path（即定义的路径）创建，但对于复杂的形状，值得看一下mask-image。

标签： html css clip-path

【解决方案1】：

您实际上并不需要剪辑路径或蒙版。带有边界半径的倾斜变换可以做到这一点：

.box {
  margin:50px;
  border-radius:80px 0;
  height:300px;
  background:red;
  position:relative;
  background:url(https://i.stack.imgur.com/rYeuk.jpg) center/cover;
  transform:skewY(-7deg);
  transform-origin:right;
  overflow:hidden;
}
.box::before {
  content:"";
  position:absolute;
  background:inherit;
  top:-20%;
  left:0;
  right:0;
  bottom:-20%;
  transform:skewY(7deg);
}

body {
  background:red;
}

<div class="box">

</div>

【讨论】：