Div有border-radius 100％需要在其中设置文本

Question

我有一个div为border-radius 100％，我有文本可以在那个div的圆圈中设置文字。

我有段落和Ul Li的文字离开div区域我需要用div的border-radius包装文本。

Answer 1

它有点长，但你可以使用它（或用javascript创建）：

  .num1 {
    -webkit-transform: translate(0px, 30px) rotate(-35deg);
  }
  .num2 {
    -webkit-transform: translate(0px, 25px) rotate(-25deg);
  }
  .num3 {
    -webkit-transform: translate(0px, 23px) rotate(0deg);
  }
  .num4 {
    -webkit-transform: translate(0px, 25px) rotate(25deg);
  }
  .num5 {
    -webkit-transform: translate(0px, 30px) rotate(35deg);
  }
  span {
    display: inline-block;
    margin: 1px;
  }
.circ{
  width: 300px;
  height: 300px;
  margin: 50px auto;

    }

<div class="circ">
  <span class="num1">a</span>
  <span class="num2">b</span>
  <span class="num3">c</span>
  <span class="num4">d</span>
  <span class="num5">e</span>
</div>

也不是：我只为webkit浏览器添加了前缀。

---

从您的编辑中，您希望使用类似

的内容

-webkit-shape-inside

css property。

由于Firefox或IE的喜欢不支持（根本没有），我建议你不要在改进浏览器支持之前加入这个 。

但是，如果您仍想继续，可能会发现一个有趣的阅读here

• 另一个有趣的读物would be this