使用 CSS 将文本设置在圆圈内

您想使用 HTML 和 CSS 将一些文本设置在圆形中吗？这听起来很疯狂，对吧？

其实不然！多亏了 shape-outside 和一些纯 CSS 技巧，我们完全可以做到这一点。

然而，这可能是一个难以掌握的布局选项。我们需要考虑很多不同的因素，例如字符数、字数、字体变化、字体大小、字体格式以及响应式需求，仅举几例。一个尺寸并不适合所有人。但是，无论如何，让我们试试吧。

目标是：我们要在圆形中显示一个 <blockquote> 和作者归属（姓名）。我们还希望使布局尽可能灵活。这种布局不需要任何额外的文件，并且可以保持 HTML 标记简洁整洁。

这就是我们追求的目标

shape-outside 功能在撰写本文时 不受 Internet Explorer 或 Microsoft Edge 18 及更低版本的支持。

首先，HTML

我们最终将需要一个包装元素才能实现这一点，所以让我们使用语义化的 <blockquote> 作为内部元素。外部包装可以是 div

<div class="quote-wrapper">
  <blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
    <p>Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.</p>
    <footer>– Jesse James Garrett</footer>
  </blockquote>
</div>

如果您有兴趣深入了解引文的 HTML，您很幸运。我们将把引文本身设置在 <p> 中，并将作者的姓名设置在 <footer> 中。我们为将需要的 CSS 样式钩子添加了类名。

接下来，一些基本 CSS

让我们从 div 包装器开始。首先，我们将最小（响应式）正方形大小设置为 300px，以便它适合较小的屏幕。然后，我们将添加相对定位（因为我们稍后会需要它）。

.quote-wrapper {
  height: 300px;
  position: relative;
  width: 300px;
}

现在，我们将使 blockquote 填充整个包装器，并使用 径向渐变 背景来模拟圆形。（没错，在这个例子中我们不使用 border-radius）。

.text {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 128, 172, 1) 0%,
    rgba(0, 128, 172, 1) 70%,
    rgba(0, 128, 172, 0) 70.3%
  );
  height: 100%;
  width: 100%;
}

需要注意的是，70% 显示出更粗糙的边缘。我手动添加了非常小的百分比增量，发现 70.3% 看起来最平滑。

现在，我们已经有了基本的圆圈。将这些额外的样式规则添加到 .text 中。

.text {
  color: white;
  position: relative;
  margin: 0;
}

到目前为止，我们有以下内容

对文本进行 CSS 处理

让我们先对段落进行样式设置

.text p {
  font-size: 21px;
  font-style: italic;
  height: 100%;
  line-height: 1.25;
  padding: 0;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

自从发布这篇文章以来，其他人已经在下面评论了使用 radial-gradient 作为 shape-outside 的 另一种技术。这比多边形产生了更平滑的半圆形曲线。

让我们使用 blockquote 的 ::before 伪元素来创建我们的形状。这就是 shape-outside 属性发挥作用的地方。我们绘制出 polygon() 坐标，并将其浮动到左侧，以便文本在形状内换行。

.text::before {
  content: "";
  float: left;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    0 0,
    98% 0,
    50% 6%,
    23.4% 17.3%,
    6% 32.6%,
    0 50%,
    6% 65.6%,
    23.4% 82.7%,
    50% 94%,
    98% 100%,
    0 100%
  );
  shape-margin: 7%;
}

让我们将径向背景颜色更改为红色。路径编辑器中的多边形点和连接线也是蓝色的。为了与编辑工具形成更大的对比，我们暂时更改了这种颜色。

background: radial-gradient(
  ellipse at center,
  rgba(210, 20, 20, 1) 0%,
  rgba(210, 20, 20, 1) 70%,
  rgba(210, 20, 20, 0) 70.3%
);

我喜欢 Firefox 的开发人员工具，因为它具有超级方便的功能，例如 shape-outside 路径编辑器。点击检查器中的多边形形状，即可查看浏览器窗口中的活动形状。非常感谢 Mozilla 开发团队创建了一个非常酷的界面！

Firefox 形状编辑器工具也适用于 clip-path 和 <basic-shape> 值。

到目前为止，我们有以下内容

我们可以对段落的 ::before 伪元素执行相同的操作。我们使用 shape-outside 反向制作相同的多边形，然后将其浮动到右侧。

.text p::before {
  content: "";
  float: right;
  height: 100%;
  width: 50%;
  shape-outside: polygon(
    2% 0%,
    100% 0%,
    100% 100%,
    2% 100%,
    50% 94%,
    76.6% 82.7%,
    94% 65.6%,
    100% 50%,
    94% 32.6%,
    76.6% 17.3%,
    50% 6%
    );
  shape-margin: 7%;
}

看起来不错，但是页脚去哪里了？它溢出了 <blockquote>（圆形彩色背景所在的位置），因此我们无法看到白色背景上的白色文本。

对页脚进行样式设置

现在，我们可以对 <footer> 进行样式设置，并为它设置一个绝对位置，使其重新回到圆圈的顶部。

.quote-wrapper blockquote footer {
  bottom: 25px;
  font-size: 17px;
  font-style: italic;
  position: absolute;
  text-align: center;
  text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
  width: 100%;
}

同样，请随时更改背景颜色以满足您的需求。

这就是棘手的地方。文本本身需要以这样一种方式进行样式设置，即字数和字符数可以在形状内工作。我使用了以下 CSS 规则来帮助它很好地适应

• font-size
• shape-margin（我们有两个排他区域需要调整）
• line-height
• letter-spacing
• font-weight
• font-style
• min-width 和 min-height（.quote-wrapper 容器的大小）

添加引号以增加一些装饰

您在原始演示中看到巨大的引号了吗？这就是我们接下来要制作的。

我们将利用 .quote-wrapper 的 ::before 伪元素。同样，这将需要相当多的调整才能使其看起来正确。我发现 line-height 对标记的垂直位置有很大影响。

.quote-wrapper::before {
  content: "\201C";
  color: #ccc;
  font-family: sans-serif, serif;
  font-size: 270px;
  height: 82px;
  line-height: 1;
  opacity: .9;
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 1;
}

实际上，花括号（“智能”）引号和直线（愚蠢）引号之间存在区别。我建议对对话使用花括号引号，对编码使用直线引号。

处理响应式样式

我们可能应该在更大的屏幕上放大引文。我将断点设置为 850px，但您可能想要使用不同的值。

@media (min-width: 850px) {
  .quote-wrapper {
    height: 370px;
    width: 370px;
  }
  .quote-wrapper::before {
    font-size: 300px;
  }
  .text p {
    font-size: 26px;
  }
  .quote-wrapper blockquote footer {
    bottom: 32px;
  }
}

我们做到了！

我们使用旧的和新的 CSS 技术相结合，将 HTML 文本设置在圆形中，以创建一个引人注目的 <blockquote>，它能吸引人们的注意力。我们实现了显示目标，而无需任何额外的依赖项，同时保持 HTML 标记简洁整洁。

我希望这篇文章鼓励您使用 shape-outside 探索新的布局可能性。敬请关注 shape-inside。