如何在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个文字才能流动。

此页面上有两个polygon之间的文字流动示例。

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

希望这有帮助。