Văn bản bọc CSS xung quanh hình ảnh hình học

Question

Có thể quấn văn bản quanh cây Giáng sinh và để văn bản chạm vào các cạnh không?

Tôi có một khối văn bản ở bên trái và một khối văn bản ở bên phải, tôi muốn đặt cây ở giữa và có bọc văn bản xung quanh cạnh bên trái và bên phải, điều này có thể?

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/

CẬP NHẬT

tôi đã có thể để có được những div bên trái của văn bản để dọc theo cạnh của cây ... vẫn không thể có được ở bên phải cũng làm như vậy:

.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

Tôi tin rằng đây là những gì bạn đang tìm kiếm ^^: JSFiddle. Do thông báo tôi đã thay đổi html trong JSFiddle một chút.

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

Một vài lưu ý cuối cùng:

• đa giác là kinda khó để giải thích, nhưng về cơ bản bạn thêm một số điểm (tưởng tượng các đường giữa các điểm) để "cắt "ra một số phần của một khối hoặc hình ảnh. The site Chris Hollenbeck recommended giải thích nó tốt hơn tôi có thể.
• Một phần lớn giải pháp của tôi dựa vào việc biết tọa độ chính xác của cây Giáng sinh. Để làm cho nó hoạt động với một cây kích thước linh hoạt sẽ khó hơn rất nhiều.
• Tôi mong đợi nhiều trình duyệt không hỗ trợ shape-outside:. Nếu bạn biết những gì trình duyệt làm và không để lại một bình luận ^^.