将文本环绕在圆形形状内
是的，我们将实现文本完美地环绕圆形。无需 JavaScript、SVG 或外部插件。只需几行 CSS 代码和一个基本的 HTML 结构。
我们走吧！
解释
<div class="box">
<i></i>
Lorem ipsum ..
</div>
div.box {
--s:450px; /*Size of the circle */
--p:15px; /* padding */
height: var(--s);
width: var(--s);
border-radius: 50%;
}
.box i,
.box::before {
content: '';
float: left;
height:100%;
width: 50%;
shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
}
.box i {
float: right;
shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);
}
[盒子]
一个基本div元素，用于width=height创建border-radius:50%一个视觉上的圆圈。我说“视觉上的”，是因为它并不能使文本环绕。
[i] & [box::before]
两个浮动元素覆盖整个 div 区域（每个元素占据整个高度和一半宽度），我们在shape-outside每个元素内部创建半圆。下图可以帮助更好地理解。
向左浮动的红色元素右侧会有一个半圆，蓝色元素则相反。我们使用变量调整圆的半径p，以模拟由创建的视觉box圆的内边距。
就是这样！
我们可以轻松地将这个技巧推广到不同的形状。我们只需要调整shape-outside形状并保持对称即可。
菱形示例
更多形状的相关文章
Stack Overflow - CSS 旋转文本 n 度，但不旋转边界框？
Stack Overflow - 如何让文本环绕带有圆角边框的形状？
Stack Overflow - 在带有圆角的 blob 中包含文本
或者
