jquery - 如何使用 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>

  

还有一把 fiddle : https://jsfiddle.net/0ryjh4xd/2/