如何使用剪切路径在图像中设置形状 [英] How to set shape in image with clip-path

问题描述

是否可以使用 clip-path css将图像设置为相同的形状.

Is it possible to set image in same shape with clip-path css.

原始图片

带有CSS的预期图片

推荐答案

您实际上并不需要剪切路径或蒙版.具有边界半径的偏斜变换可以做到这一点:

You don't really need clip-path or mask. A skew transformation with border-radius can do it:

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

这篇关于如何使用剪切路径在图像中设置形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！