html - CSS 将文本环绕在几何图像周围

Question

是否可以将文字环绕圣诞树并让文字触及边缘？

我左边有一个文本 block ，右边有一个文本 block ，我想把树放在中间，让文本环绕左右两侧的边缘，这可能吗？

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/

更新

我能够让文本的左侧 div 沿着树的边缘......仍然无法让右侧做同样的事情:

    .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/

Answer 1

我相信这就是您要找的^^: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;
}

一些最后的说明:

• 多边形有点难以解释，但您基本上可以添加一些点(想象一下点之间的线)来“剪切”出 block 或图像的某些部分。 The site Chris Hollenbeck recommended比我能更好地解释它。
• 我的解决方案的很大一部分依赖于知道圣诞树的确切坐标。要让它与灵活大小的树一起工作会困难得多。
• 我预计许多浏览器不支持 shape-outside:。如果您知道浏览器的功能，请不要发表评论 ^^。