如何在 CSS 多边形内放置段落

Question

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

我看到很多页面引用了shape-inside，但我读到shape-inside 已被弃用并且没有替代品。它们也是在 2014 年编写的，所以我希望 CSS3 从那时起发生了变化。

在网上查看之后，我能够拼凑出一些几乎有效的东西。我喜欢这个形状，但现在我需要在形状内包裹文字并隐藏溢出。

我已经看到有关::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 个polygons 之间流动的示例。

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