html - 如何在CSS多边形内放置一个段落

Question

我已经能够成功地使用 shape-outside: polygon(...) 和 clip-path: polygon(...) 来创建所需的多边形形状。

我看到许多页面引用了 shape-in​​side 的使用，但我读到 shape-in​​side 已被弃用并且没有替代品。它们也是 2014 年编写的，所以我希望 CSS3 从那时起有所改变。

在网上查看之后，我能够拼凑出一些几乎有效的东西。我喜欢这个形状，但现在我需要文本在形状内换行并 overflow hidden 。

我已经看到关于 ::before 的提示，但我仍然不明白这会有什么帮助。测试它似乎没有产生任何结果。

无论简单还是复杂，如何使用CSS将文本包裹在多边形内？还是解决方案在 CSS 之外？我是否需要使用其他方法，例如 jQuery？

CSS

/*
For reference:    
@vertex1: 120px;
@vertex2: @vertex1*2;
*/

.diamondContainer {
    display: block;    
    position: absolute;
    text-align: center;
    width: @vertex2;
    height: @vertex2;
    overflow: hidden; /* hide anything longer than allowed string length */

    /* This is a diamond shape */    
    shape-outside: polygon(@vertex1 0, @vertex2 @vertex1, @vertex1 @vertex2, 0 @vertex1);    
    clip-path: polygon(@vertex1 0, @vertex2 @vertex1, @vertex1 @vertex2, 0 @vertex1);
}

HTML

<div class="diamondOuter">
    <div class="diamondWrapper">
        <div class="diamondContainer diamondCell2">
            <span><strong>Title Text</strong><br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</span>
        </div>
    </div>
</div>

Answer 1

再看看 shape-outside。

您不将其设置在文本容器上，而是设置在文本周围的其他元素上。

在您的情况下，您可能需要至少 2 个 div 才能使文本四处流动。

本页有一个文本在 2 个多边形之间流动的例子。

https://www.html5rocks.com/en/tutorials/shapes/getting-started/