Подтвердить что ты не робот

CSS обтекает текст вокруг геометрических изображений

Можно ли обернуть текст вокруг елки и прикоснуться к краям текста?

У меня есть блок текста слева и блок текста справа, я хотел бы поместить дерево посередине и обернуть текст вокруг левого и правого боковых краев, возможно ли это?

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/

4b9b3361

ОТВЕТЫ

Ответ 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;
}

Несколько заключительных заметок:

  • Многоугольник довольно трудно объяснить, но вы в основном добавляете некоторые точки (воображайте линии между точками), чтобы "вырезать часть части или изображения". Рекомендуемый сайт Chris Hollenbeck объясняет это лучше, чем я могу.
  • Большая часть моего решения зависит от знания точных координат рождественской елки. Сделать его работу с гибким деревом размеров будет намного сложнее.
  • Я ожидаю, что многие браузеры не поддерживают shape-outside:. Если вы знаете, что делают браузеры, и не оставляйте комментарий ^^.