CSS wrap text around geometric images - html

Question

Is it possible to wrap text around a christmas tree and have the text touch the edges?
I have a block of text on the left and a block of text on the right, I would like to put the tree in the middle and have text wrap around the left and right side edges, is this possible?
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
I was able to get the left div of text to along the edge of the tree...still cant get the right side to do the same:
.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

I believe this is what you are looking for ^^: JSFiddle. Do notice I changed the html in the JSFiddle a little bit.
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;
}
A few final notes:
The polygon is kinda hard to explain, but you basically add some points (imagine lines between the points) to "cut" out some part of a block or image. The site Chris Hollenbeck recommended explains it better than I can.
A big part of my solution relies on knowing exact coordinates of the christmas-tree. To make it work with a flexible size tree will be a lot harder.
I expect many browsers do not support shape-outside:. If you know what browsers do and do not leave a comment ^^.