CSS圍繞幾何圖像包裝文本

Question

是否可以將文本包裝在聖誕樹周圍並讓文本觸及邊緣？

我在左邊有一塊文字，右邊有一塊文字，我想把樹放在中間，文字環繞左右邊緣，這是可能的嗎？

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/

UPDATE

我能得到文本的左側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; 
} 

最後幾點注意事項：

• 多邊形是有點難以解釋，但你基本上加點分（想象點之間的線）「切割「取出某個塊或圖像的某個部分。 The site Chris Hollenbeck recommended解釋它比我更好。
• 我的解決方案的很大一部分依賴於知道聖誕樹的確切座標。要使它與靈活大小的樹一起工作將會困難得多。
• 我希望很多瀏覽器不支持shape-outside:。如果你知道瀏覽器做什麼，不要留下評論^^。