html - 剪辑路径多边形 - 剪切图像但保持原始图像大小

Question

代码片段演示了我面临的问题。使用 clip-path: polygon 时，它会剪切 image/div 但保持原始图像大小。这意味着空间被多余地占用，因为图像已经被切碎了。我想让我的 div 直接位于 .image-poly 下方，其中已被切断的图像仍然存在但未显示。

我希望这是有道理的，这让我困惑了大约 30 分钟

.image-poly{
clip-path: polygon(0 0, 100% 0, 100% 63%, 0 40%);}

.text{
background-color:black;
color:white;}

<div class = "image-poly">
<img src = "http://www.qygjxz.com/data/out/193/3856596-random-image.png">
</div>

<div class = "text">
<p>ewfewfewfwefewfwefwef
ewfewfewfwefewfwefwef
ewfewfewfwefewfwefwef
ewfewfewfwefewfwefwef
ewfewfewfwefewfwefwef
</p>
</class>

Answer 1

正如你已经说过的:

When using clip-path: polygon, it cuts the image/div but keeps the original image size

很遗憾，没有办法让 div 自动流入“空白”空间，因为没有空白空间——图像仍然和以前一样大，只是没有显示。

因此，如果您真的想让文字直接位于图像下方，您将不得不寻找其他解决方案。例如，您可以将文本重叠在图像上，这样看起来文本就在图像剩余部分的正下方。但是，请记住，这需要您使用 position: absolute。这是一个如何做到这一点的示例:

.image-poly{
    clip-path: polygon(0 0, 100% 0, 100% 63%, 0 40%);
}

.text{
    background-color:black;
    color:white;
    position: absolute;
    top: 190px;
    left: 10px;
}

<div class = "image-poly">
    <img src = "http://www.qygjxz.com/data/out/193/3856596-random-image.png">
    </div>

    <div class = "text">
    <p>ewfewfewfwefewfwefwef
    ewfewfewfwefewfwefwef
    ewfewfewfwefewfwefwef
    ewfewfewfwefewfwefwef
    ewfewfewfwefewfwefwef
    </p>