Question

代码段演示了我面临的问题。使用clip-path：polygon时，它会剪切图像/ div但保留原始图像大小。这意味着空间被冗余占用，因为图像已被切断。我想将我的div直接放在.image-poly下面，其中已被切断的图像仍然存在但未显示。

我希望这是有道理的家伙，这让我难以忍受了大约30分钟

＆＃13;

.image-poly{
clip-path: polygon(0 0, 100% 0, 100% 63%, 0 40%);}

.text{
background-color:black;
color:white;}

＆＃13;

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

＆＃13;

Answer 1

正如你已经说过的那样：

当使用clip-path：polygon时，它会剪切image / div但保留原始图像尺寸

很遗憾没有办法让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>

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

1 个答案: