How to set shape in image with clip-path

橙三吉。 提交于 2021-02-10 20:18:56

问题


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

Original Image

Expected image with css


回答1:


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>


来源:https://stackoverflow.com/questions/64498483/how-to-set-shape-in-image-with-clip-path

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!