使用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%）意味着它们之间没有混合。

为了获得完全圆角，我们将

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>