我在一个网站上看到,有一种方法可以将文本包裹在非矩形形状周围,但不知怎的,我不知道该怎么做,
现在我从大约3年前发布的问题中找到了这个链接,如果有更简单的方法,事情已经改变了,这将是很好的.
这是一个提供更多想法的可视化示例,以及网站的网址解释如何做到这一点,但正如我所说,这是大约3岁.
http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes
解决方法
今天,如果你想要这种效果跨浏览器并没有太多选择,特别是对于旧版本,你需要手动设置浮动元素,使文本远离所选区域.
在未来,我们将拥有：http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/
演示：
http://codepen.io/anon/pen/fmlgp
div {display:table;border:1px solid;
background:url(http://www.printable-math-worksheets.com/images/Polyhedron.gif) center 100px no-repeat;
background-size:150px 150px;
width:600px;margin:auto;}
div p {display:table-cell;padding:0.25em;}
p:first-child {border-right:1px solid;}
p::before {
content:'';
float:right;
border-left:solid rgba(0,0.2);/* demo purpose */
padding-top:125px;
}
.cssShape {
float:right;
clear:right;
background:rgba(0,0.2);/* demo purpose */
width:15px;
height:1.2em;
margin:0;
}
.right .cssShape {
float:left;
clear:both;
}
.left .cssShape + .cssShape{
width:25px;
}
.left .cssShape + .cssShape + .cssShape,.right .cssShape + .cssShape + .cssShape + .cssShape {
width:45px;
}
.left .cssShape + .cssShape + .cssShape + .cssShape,.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape + .cssShape + .cssShape{
width:60px;
}
.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape{
width:70px;
}
.left .cssShape + .cssShape + .cssShape + .cssShape + .cssShape + .cssShape {
width:60px;
}
.right .cssShape + .cssShape + .cssShape {
width:25px;
}
.right .cssShape + .cssShape + .cssShape + .cssShape + .cssShape{
width:20px;
}
.right .cssShape + .cssShape + .cssShape {
width:60px;
}
.right .cssShape + .cssShape {
width:70px;
}
.right .cssShape {
width:60px;
}
用于测试的HTML
<div>
<p class="left">
<span class="cssShape"></span>
<span class="cssShape"></span>
<span class="cssShape"></span>
<span class="cssShape"></span>
<span class="cssShape"></span>
<span class="cssShape"></span>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,feugiat vitae,ultricies eget,tempor sit amet,ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi,condimentum sed,commodo vitae,ornare sit amet,wisi. Aenean fermentum,elit eget tincidunt condimentum,eros ipsum rutrum orci,sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus,neque id cursus faucibus,tortor neque egestas augue,eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi,tincidunt quis,accumsan porttitor,facilisis luctus,metus</p>
<p class="right"> <span class="cssShape"></span>
<span class="cssShape"></span>
<span class="cssShape"></span>
<span class="cssShape"></span>
<span class="cssShape"></span>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,metus</p>
</div>
