如何在 css 中制作椭圆形

Question

我正在尝试使用 css class 制作这个灰色形状。

我认为使用 border-raduis 会奏效。形状很接近，但仍然偏离。

我目前有这个：

这是我正在使用的css：

.total--races {
    text-align: right;
    font-size: 32px;
    background: #44ade2;
    color: #fff;
    width: 78px;
    height: 88px;
    border-radius: 50px 0px 0px 50px;
}

和这个 html :

<div className="total--races">
   {get(meeting, 'races', '') && 
   Object.keys(meeting.races).length}
</div>

任何关于如何使我的形状看起来更接近的建议都会有所帮助。谢谢。

Answer 1

使用radial-gradient而不需要border-radius

.total--races {
  text-align: right;
  font-size: 32px;
  color: #fff;
  width: 78px;
  height: 88px;
  background: 
    radial-gradient(circle at right center,#44ade2 70%,transparent 72%);
}

<div class="total--races">
  99<br>text
</div>

为了更好地控制使用显式半径：

.total--races {
  text-align: right;
  font-size: 32px;
  color: #fff;
  width: 78px;
  height: 88px;
  background: 
    radial-gradient(80% 110% at right center,#44ade2 98%,transparent 100%);
}

<div class="total--races">
  99<br>text
</div>

如何在 css 中制作椭圆形

How to make oval-ish shape in css

css

css-shapes