提问人：Jonathan Yont 提问时间：8/30/2023 更新时间：8/30/2023 访问量：11
如何使图像满足具有 ：：after 和 skew 的 div
How to make a image fulfill a div that has a ::after with skew
问：
我希望图像遍布这个元素，但我无法弄清楚如何完成这一点。
我正在尝试实现此布局：
但现在，我被困在这一点上：
我正在使用 codepen 来测试它，但我将在这里发布我的代码：
HTML格式：
<div class="box">
<img src="https://source.unsplash.com/random" alt="" class="img-fluid h-100 w-100">
</div>
CSS：
.box{
margin: 50px 20px;
width: 200px;
height: 200px;
position: relative;
}
.box::after{
background-image: url("https://source.unsplash.com/random");
background-size: cover;
content: "";
border-radius: 20px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: -90%;
z-index: -1;
transform-origin: top right;
transform: skew(-30deg, 0deg);
}
任何帮助或提示将不胜感激。
我正在考虑使用掩码或带有 z-index 的包装器，但我完全被困住了。
我还需要图像保持在正常位置（不偏斜），但目前没有必要。
这是我用来解决此问题的 codepen 的链接： https://codepen.io/jonathanyont/pen/yLGOebW?editors=1100
答：
0赞
Ana
12/2/2023
#1
您需要倾斜包装器，在其上设置，然后使用与父项上相同的角度将图像打开。overflow: hidden-1
喜欢这个：
figure {
--a: -20deg;
overflow: hidden;
margin: 0;
width: max-content;
border-radius: 1.5em;
transform-origin: 0 0;
transform: skewx(var(--a));
}
img {
border-radius: inherit;
transform-origin: inherit;
transform: skew(calc(-1*var(--a)));
}<figure>
<img src="https://images.unsplash.com/photo-1700667315345-e0c51587b2fd?w=400"/>
</figure>
评论