如何在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这个页面上有一个文本在2 秒之间流动的例子.

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

希望这可以帮助.