如何在css中将圆的一部分设置为背景

我正试图把这个圈子的一部分作为背景

我想要的是：

例如：

我试图通过

边界半径

来实现这一点，但并不总是有效

以下是我尝试过的：

a{
  min-width: 80px;
  height: 60px;
  padding: 20px 15px !important;

  // active/current navigation link
  &.active, &:hover{
     background-color: #e15669;
    &:before{
      position: absolute;
      content: '';
      display: block;
      height: 60px;
      width: 30px;
      border-radius: 90px 0 0 90px;
      -moz-border-radius: 90px 0 0 90px;
      -webkit-border-radius: 90px 0 0 90px;
      background: #e15669;
      top: 0;
      left: -30px;
      z-index: -1;
    }
    &:after {
      position: absolute;
      content: '';
      display: block;
      height: 60px;
      width: 30px;
      border-radius: 0 90px 90px 0;
      -moz-border-radius: 0 90px 90px 0;
      -webkit-border-radius: 0 90px 90px 0;
      background: #e15669;
      top: 0;
      right: -30px;
      z-index: -1;
    }
  }
}

您可以这样尝试：

.a{
高度：100px；
宽度：100px；
文本对齐：居中；
背景色：红色；
线高：100px；
边框左上半径：100%50px；
边框右上角半径：100%50px；
边框左下半径：100%50px；
边框右下半径：100%50px；
}

---

您好

使用径向渐变对背景进行着色，如下所示

正文{
文本对齐：居中；
}
a{
填充：1em；
显示：内联块；
文字装饰：无；
边缘：2米；
颜色：白色；
背景：径向梯度（圆圈最远侧，红色，红色90%，透明90%）；
}

TEXT基于您的代码的解决方案


a{
显示：内联块；
最小宽度：80px；
高度：60px；
填充：20px 15px；
框大小：边框框；
位置：相对位置；
溢出：隐藏；
}
a、 活动：在之前，a:悬停：在之前{
位置：绝对位置；
内容：''；
显示：块；
身高：200%；
宽度：100%；
边界半径：50%；
背景：番茄；
排名：0；
右：0；
底部：0；
左：0；
保证金：自动；
z指数：-1；
}


能否将HTML和CSS添加到Fiddle中？你说的“不总是有效”是什么意思？@ShlomiHaver我必须为每个元素编写CSS。第一个解决方案是我需要的，但如何解决像素化边界？这是边界半径和亚像素渲染的问题。不确定是否有解决方案……至少我没有找到。@NeosFox，我猜你的意思是，使用chrome，你可以模糊渐变边缘，或者使用背景图像+背景尺寸注：这需要已知尺寸，并且不是动态的，@Paulie_D你能详细说明你的评论吗？如果没有填充物中的神奇数字等，背景就不是一个圆-@Paulie_D请看一下更新的答案。请让我知道你的评论，你仍然在使用神奇的数字。理想情况下，无论文本的高度/宽度如何，圆圈都会保持不变，而无需每次调整填充/半径等。