包裹在多边形形状的文本

Question

使用CSS创建多边形形状。但是，polygon布局的内部内容不遵循多边形形状。它被形状裁剪隐藏。

需要将文本换行于多边形。

.flex {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.polygon1,
.polygon2 {
  float: left;
  width: 250px;
  height: 250px;
  background: #1e90ff;
  -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  text-align: center;
}
.polygon1 {
  padding: 10px;
}
.polygon2 {
  padding: 40px;
}

<div class="polygon1">
  <div class="flex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software.
  </div>
</div>
<div class="polygon2">
  <div class="flex">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software.
  </div>
</div>

尝试：

• 将padding添加到polygon。但是，填充measurement取决于polygon维度。所以，没有找到准确的测量结果。

截图：

Codepen： Goto Edit CodePen

Answer 1

  

警告： 不应在实时项目 ¹ 中使用shape-outside属性。这个答案只是为了说明所需的输出如何   用这个属性来实现。

您所提到的形状可以通过shape-outside property来实现。您可以制作两个遵循剪辑路径形状的形状。它们将将文本包装在多边形中。这是一个例子：

div {
  width: 250px; height: 250px;
  background: #1e90ff;
  -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  text-align: justify;
  overflow: hidden;
}
span:after,span:before {
  content: '';
  width: 50%; height: 100%;
  -webkit-shape-margin: 10px;
  shape-margin: 10px;
}
span:before {
  float: left;
  -webkit-shape-outside: polygon(100% 0, 20% 20%, 0% 60%, 50% 100%, 0 100%, 0% 0%);
  shape-outside: polygon(100% 0, 20% 20%, 0% 60%, 50% 100%, 0 100%, 0% 0%);
}
span:after {
  float: right;
  -webkit-shape-outside: polygon(0 0, 80% 20%, 100% 60%, 50% 100%, 100% 100%, 100% 0%);
  shape-outside: polygon(0 0, 80% 20%, 100% 60%, 50% 100%, 100% 100%, 100% 0%);
}

<div>
  <span></span>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software.
</div>

对于shape-outside属性的浏览器支持，您可以选中canIuse。

¹ _{CSS Shapes Module Level 1实际（2016年2月）具有“候选推荐”的状态。因为这意味着它正在进行中，它可能随时发生变化，因此不应用于测试之外。}

Answer 2

您可以使用CSS形状，但它们是not broadly supported right now。 Here's a great tutorial开始使用它们。

我会使用它并尝试使用填充作为一种可爱的后备。如果使用的浏览器无法呈现CSS形状，那么使用Modernizr作为特征检测器仅应用填充是一个很好的例子。