如何使用 css 只为圆的 10% 底部着色？

Question

如何使用 css 为圆的唯一 10% 底部着色？

Answer 1

最简单的解决方案是对第二个边框使用框阴影，对 10% 填充使用绝对定位的元素。

这是片段示例：

  .circle {
      display: inline-block;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      border: 10px solid white;
      text-align: center;
      line-height: 250px;
      overflow: hidden;
      padding: 3px;
      position: relative;
      box-sizing: border-box;
      box-shadow: 0 0 0 10px gray;
      margin: 50px
    }

    .fill {
      background-color: teal;
      height: 10%;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }

<div class="circle">
  <span class="text">text</span>
  <div class="fill"></div>
</div>

  

和小提琴：https : //jsfiddle.net/0ryjh4xd/2/