Html CSS将文本环绕几何图像

是否可以将文字环绕在圣诞树上，并使文字接触边缘

左边有一个文本块，右边有一个文本块，我想把树放在中间，并在左右边上有文字环绕，这是可能的吗？< /P> 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>

.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%;
}

小提琴：

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

.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%;
}

更新

我能够让左边的文本沿着树的边缘…仍然不能让右边也这样做：

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

.main content.圣诞树图片{
宽度：90%；
外部形状：多边形（50%0、100%100%、0%100%、0%100%）内容框；
浮动：对；
}
。Morbi sed diam eu dolor发酵剂pharetra。这是一个非常好的例子。库拉比图尔·塞德·阿利奎特·米。Morbi quis同侧非前连续静脉曲张。这是一家新成立的跨国公司。大库拉比图尔酒店，位于东部nec，位于福西布斯码头。阿利奎姆·伊斯特·尼西，莫里斯·奎斯（mauris quis），威尼斯特里斯蒂克·乌尔纳（venenatis tristique urna）。整型三角帆、奥奇·洛博蒂斯·埃格斯塔斯·费吉亚特、埃尼姆·马萨·亨德雷特·图尔皮斯、奥古斯都的主旨。
。Morbi sed diam eu dolor发酵剂pharetra。这是一个非常好的例子。库拉比图尔·塞德·阿利奎特·米。Morbi quis同侧非前连续静脉曲张。这是一家新成立的跨国公司。大库拉比图尔酒店，位于东部nec，位于福西布斯码头。阿利奎姆·伊斯特·尼西，莫里斯·奎斯（mauris quis），威尼斯特里斯蒂克·乌尔纳（venenatis tristique urna）。整型三角帆，奥奇·洛博蒂斯·埃古斯塔·费吉亚特，埃尼姆·马萨·亨德雷特·图尔皮斯，奥古斯特·奥古斯特的名言
。Morbi sed diam eu dolor发酵剂pharetra。这是一个非常好的例子。库拉比图尔·塞德·阿利奎特·米。Morbi quis同侧非前连续静脉曲张。这是一家新成立的跨国公司。大库拉比图尔酒店，位于东部nec，位于福西布斯码头。阿利奎姆·伊斯特·尼西，莫里斯·奎斯（mauris quis），威尼斯特里斯蒂克·乌尔纳（venenatis tristique urna）。整型三角帆、奥奇·洛博蒂斯·埃格斯塔斯·费吉亚特、埃尼姆·马萨·亨德雷特·图尔皮斯、奥古斯都的主旨。
。Morbi sed diam eu dolor发酵剂pharetra。这是一个非常好的例子。库拉比图尔·塞德·阿利奎特·米。Morbi quis同侧非前连续静脉曲张。这是一家新成立的跨国公司。大库拉比图尔酒店，位于东部nec，位于福西布斯码头。阿利奎姆·伊斯特·尼西，莫里斯·奎斯（mauris quis），威尼斯特里斯蒂克·乌尔纳（venenatis tristique urna）。整型三角帆，奥奇·洛博蒂斯·埃古斯塔·费吉亚特，埃尼姆·马萨·亨德雷特·图尔皮斯，奥古斯特·奥古斯特的名言

---

我相信这就是你要找的^^:。请注意，我稍微更改了JSFIDLE中的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-->

最后几点注意事项：

• 多边形有点难以解释，但基本上是添加一些点（想象点之间的线）来“剪切”块或图像的某些部分。比我解释得更清楚
• 我的解决方案很大一部分依赖于知道圣诞树的精确坐标。要使它与一个灵活大小的树一起工作要困难得多
• 我希望许多浏览器不支持

  外部形状：

  。如果你知道浏览器做什么，不留下评论^^

---

这里有一篇关于这个问题的好文章：这是你想要的吗？我不确定我是否理解你想要什么。与@Godisgood类似，你可以有两列文本。右列将由树的左侧限制，左列将由树的右侧限制。你需要写两个单独的多边形，每列一个。你离@godisgood很近。这些单独的多边形看起来像什么？你能把它放在一个答案中吗@EnigmadanAs建议，这是使用两列文本，左列受使用伪元素的树的右侧影响

：before

，右列受使用伪元素的树的左侧影响

：：before

。我的解决方案就不那么优雅了。祝你好运+1，但-仅适用于webkit（Chrome、Safari）和Opera