html - 在非矩形周围环绕文本 css/html

Question

我在一个网站上看到有一种方法可以将文本环绕在非矩形形状周围，但不知何故我不知道该怎么做，

现在我从大约 3 年前发布的一个问题中找到了这个链接，当时情况发生了变化，所以如果有更简单的方法，那就太好了。

这是提供更多想法的视觉示例，以及解释如何操作的网站 url，但正如我所说，这大约有 3 年历史。

http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes

Answer 1

如今，如果您想要这种跨浏览器的效果并没有太多选择，尤其是对于较旧的浏览器，您需要手动设置 float 元素以使文本远离所选区域。

在未来，我们将拥有这个: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,0,0.2);/* demo purpose */
  padding-top:125px;
}
.cssShape {
  float:right;
  clear:right;
  background:rgba(0,0,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, 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>
</div>