html - 使用 css 如何创建一个药丸形状，一侧是圆形，另一侧是倾斜的？

Question

这是我要创建的形状:

这是我目前所拥有的:

这是我的代码:

.pill-left {
      position: relative;
      width: 50px;
      height: 50px;
      background: #FDA725;
      display: inline-block;
      border-radius: 100% 100% 0 0;
      transform: rotate(-90deg);
    }
    
    .pill-right {
      position: relative;
      width: 50px;
      height: 50px;
      background: #CED2D9;
      display: inline-block;
      border-radius: 100% 100% 0 0;
      transform: rotate(90deg);
    }

<div class="pill-left">5
</div>
<div class="pill-right">10
</div>

我有两个问题，一是如何在药丸内显示文字而不旋转，二是如何实现斜线。我已经尝试了一些东西，比如 border-right: 50px。我怎样才能做到这一点？我怀疑这很明显，但我无法让它发挥作用。谢谢

Answer 1

您可以使用线性渐变背景来完成此操作:

简要说明
linear-gradient 背景颜色处理两种药丸颜色 - 在这里设置相同的位置(例如 48% 和 48%，然后是 52% 和 52%)意味着它们之间没有混合。

为了获得完全圆 Angular ，我们将 border-radius 设置为元素高度的一半或更大 - 变大没有坏处，所以 9999px 只是确保它始终大于元素高度.

在这种情况下你不一定需要 display:flex & justify-content，但如果你例如设置一个特定的宽度。

.split-pill {
  border-radius: 9999px;
  padding: 10px;
  display: inline-flex;
  justify-content:space-between;
  background: linear-gradient(-70deg, #FDA725 48%, white 48%, white 52%, #CED2D9 52%);
}

.left {
  padding-right: 10px;
}

.right {
  padding-left: 10px;
}

<div class="split-pill">
  <span class="left">10%</span>
  <span class="right">50%</span>
</div>