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. Заметьте, я немного изменил html в JSFiddle.

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:. Если вы знаете, что делают браузеры, и не оставляйте комментарий ^^.