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

Question

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

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

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

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

Answer 1

CSS Shapes 的

shape-outside

属性现已在 Chrome、Safari 和 Opera 中得到广泛支持。

截至 2015 年 6 月，IE 或 Firefox 尚不支持，但这不应妨碍您使用渐进增强并为这些浏览器提供简单的矩形形状。

这篇文章是学习使用 CSS Shapes 进行布局的一个很好的起点：http://www.chenhuijing.com/blog/why-you-should-be-excited-about-css-shapes/

我不推荐堆叠浮动元素技术。尽管它产生了预期的效果，但它也会生成难以维护和推理的代码。

保持简单、易于访问，并在本机浏览器功能允许的情况下提供额外的功能。没有必要让每个浏览器中的内容看起来都完全相同。

Answer 2

今天（2014年），如果您想要这种效果跨浏览器，特别是对于较旧的浏览器，没有太多选择，您需要手动设置浮动元素，以使文本远离所选区域。

将来，我们将拥有这个：http://www.w3.org/TR/2013/WD-css-shapes-1-20131203/

---

2024 2014的未来已经到来，shape-outside被广泛实施并被使用。

下面是一个使用 2024 年可能性的示例：

div {
  max-width:600px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);  
  text-align:justify;
}
div p {
  padding:1em;
  background:linear-gradient(ivory,silver)
}
div p::before {
  content:'';
  margin-inline:-1em;
  float:right;
  background: url(https://picsum.photos/id/55/460/307) -2em 5em / 35em #F26B11;
  clip-path: circle(8em at 100% 50%);;
  shape-outside: circle(8em at 100% 50%);;
  width:15em;
  height:35em;
}

div p + p::before {
  float:left;
  background: url(https://picsum.photos/id/55/460/307) -17em 5em  / 35em #2642EC;
  shape-outside: polygon(0 9.5em, 8.2em 12em, 5.2em 25.5em, 0 25.55em);
  clip-path: polygon(0 9.5em, 8em 12em, 5em 25.5em, 0 25.55em);
}

<div>
<p>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. 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>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. 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>

---

下面的原始答案现在已经过时很多年了。 CSS 变得非常好！ 演示： 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>