在自动换行曲线中动态对齐 html 列表？

Question

我正在尝试将 HTML 列表包裹成一条曲线。我想避免指定每个列表元素的位置，以便在添加项目时自动计算它的位置。

我附上了一张我正在努力完成的图片。谢谢！

Answer 1

您可以将 shape-outside 与 float 和负数 margin 结合使用。

用border-radius: 50%创建一个圆形元素，让它float: left并设置shape-outside: circle()。这样，文本就会浮在圆形的外面。现在您可以设置一个负的右边距，即 margin-right: -6em; 将浮动文本拉到圆形元素内。

这是一个工作示例：

.curve {
  width: 200px;
  height: 200px;
  background: purple;
  float: left;
  margin-right: -6em;
  border-radius: 50%;
  shape-outside: circle();
}

ul {
  padding: 2.5em 0;
  list-style: none;
  color: white;
}

<div class="curve"></div>
<ul>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
  <li>Lorem ipsum</li>
</ul>

在自动换行曲线中动态对齐 html 列表？

Dynamically align html list in wordwrap curve?

html

css

html-lists

css-shapes