问题
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