Question

我已经使用剪切路径属性创建了一个倾斜的底部div。

现在，下一部分将以这种方式放置图像，以便在此div之外显示一点。

问题是此图像根本不在div外部显示。它只是以相同的形状显示在倾斜的div中，但不显示在其外部。

这是我的密码笔的链接-https://codepen.io/silentarrowz/pen/wYdEOM

我如何也将图像移到div之外？

我也尝试过使用偏斜属性进行此操作，但这也存在相同的问题。

这也是代码

.slanted {
    background-color:red;
    height:200px;
/*     -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); */
  -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 50%);
     clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 50%);
}

.baboon{
  width:40%;
  position:relative;
  top:10px;
}

所需的输出可能类似于此Codepen

是的。如果可以使用clip-path以外的方式实现相同的倾斜和图像定位效果，那么我很愿意使用它。

https://codepen.io/dudleystorey/pen/rObREE

如何将图像定位在倾斜的div外面一点-用于倾斜的剪辑路径

0 个答案: