如何在css中制作椭圆形

【问题标题】：How to make oval-ish shape in css如何在css中制作椭圆形
【发布时间】：2019-08-07 06:05:38
【问题描述】：

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

我认为使用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>

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

【问题讨论】：

标签： css css-shapes

【解决方案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>

【讨论】：