CSS环绕几何图形的文本

Question

CSS环绕几何图形的文本

10

是否可以将文字环绕在圣诞树周围，并使文字触及边缘？

左侧有一块文本区块，右侧也有一块文本区块，我想把圣诞树放在中间，让文本环绕在左侧和右侧的边缘上，这可能吗？

HTML：

<div class="main-content">
    <div class="left-text">
        <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>  
        <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
    </div>
    <div class="right-text">
        <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p> 
        <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
    </div>
    <div class="christmas-tree"><img src="http://www.raidersleafs.com/images/christmas-tree.png" /></div>
</div>

CSS：

.main-content {

}

.main-content .left-text {
        width:25%;
        float:left;
}

.main-content .left-text p.left {
}

.main-content .right-text {
        width:25%;
        float:right;
}

.main-content .right-text p.right {
}

.main-content .christmas-tree {
        text-align: center;
}

.main-content .christmas-tree img {
        width: 90%;
}

FIDDLE:

http://jsfiddle.net/63p19cbc/1/

更新:

我已经成功让文本的左侧贴近树的边缘......但仍无法使右侧达到同样的效果:

    .main-content .christmas-tree img {
    width: 90%;
    shape-outside: polygon(50% 0, 100% 100%, 0% 100%, 0 100%) content-box;
    float: right;
    }



    <div class="main-content">
        <div class="christmas-tree"><img src="http://www.raidersleafs.com/images/christmas-tree.png" /></div>
<div class="left-text">
            <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>  
            <p class="left">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
        </div>
        <div class="right-text">
            <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p> 
            <p class="right">Sed pretium dapibus lorem. Morbi sed diam eu dolor fermentum pharetra. Aliquam quis erat maximus ligula tincidunt tincidunt vel sed dolor. Curabitur sed aliquet mi. Morbi quis ipsum non ante consectetur varius. Fusce dapibus posuere metus, nec interdum ante. Curabitur magna odio, interdum at est nec, vulputate faucibus quam. Aliquam est nisi, ultricies in mauris quis, venenatis tristique urna. Integer tristique, orci lobortis egestas feugiat, enim massa hendrerit turpis, quis dictum purus tortor ac augue.</p>
        </div>

    </div>

http://jsfiddle.net/63p19cbc/2/

- user979331

4

这里有一篇与此问题相关的好文章：http://www.html5rocks.com/en/tutorials/shapes/getting-started/ - khollenbeck

这是你想要的吗？http://jsfiddle.net/63p19cbc/3/ 我不确定我是否理解你的需求。 - Ian Hazzard

与@Godisgood所做的类似，您可以有两列文本。右侧列将受树的左侧限制，而左侧列将受树的右侧限制。您需要编写两个单独的多边形，一个用于每个列。 - Enigmadan

你很接近了 @上帝是好的 - user979331

这些单独的多边形会是什么样子？你能在回答中展示一下吗，@Enigmadan？ - user979331

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob Monhemius · Accepted Answer

我相信这是您要寻找的 ^^：JSFiddle。请注意，我稍微修改了JSFiddle中的HTML。 HTML

<div class="main-content">
            <div class="left">
                <p> In a one horse open sleigh.</p>
            </div>
            <div class="right"> 
                <p>Oh the weather outside is frightful</p>
            </div>
    <img class="christmas-tree" src="http://www.raidersleafs.com/images/christmas-tree.png" />
        </div><!--main-content-->

CSS

.main-content {
    position: relative;
    width: 1000px;
    margin: auto;
}
/*align image to center (horizontal) and place it by absolute positioning (so the
  image is always appearing on the same spot) after placing it we will create an
  empty spot so the text will appear to flow around the image*/
img.christmas-tree  {
    position: absolute;
    left: calc(50% - 215px);
    width: 430px;
}
/*Just some text assigned to the right div*/
.right{
    width: 50%;
    float: right;
}
/*We will create empty space where the christmas tree is by adding blank content
 with ::before*/
.right::before{
    content: "";
    height: 550px;
    shape-outside: polygon(50px 0, 50px 150px, 215px 550px, 0 550px);/*this cuts out
        a part of the block so the text can freely move around. The values in here
        are coördinates in this blank content that allow text to float around it.*/
    width: 100%;
    float: left;    
}
.left{
    width: 50%;
    float: left;
    clear: left;
    text-align: right;
}
/*We will create empty space where the christmas tree is by adding blank content
  with ::before*/
.left::before{
    content: "";
    shape-outside: polygon(450px 0px, 450px 150px, 270px 550px, 500px 550px); /*this
                     cuts out a part of the block so the text can freely move around*/
    height: 550px;
    width: 100%;
    float: right;
}

最后几点注意事项：

多边形有点难解释，但基本上你需要添加一些点（想象点之间的线），以“切割”块或图片的某个部分。 Chris Hollenbeck 推荐的网站解释得比我好。
我的解决方案的一个重要部分是知道圣诞树的确切坐标。要使其适用于大小可变的树将会更加困难。
我预计许多浏览器不支持 shape-outside:。如果您知道哪些浏览器支持或不支持，请留言 ^^。