How to make oval-ish shape in css

Question

I am trying to make this grey shape using a css class.

I thought using a border-raduis would work. The shape is close but is still off.

I currently have this:

This is the css that i'm using:

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

and this html :

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

Any suggestion of how to make my shape look close would help. Thanks.

Temani Afif · Accepted Answer · 2019-08-06 14:34:05Z

4

use radial-gradient without the need of 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>

To have better control use explicit radius:

.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>

answered Aug 6, 2019 at 14:34

Temani Afif

280k30 gold badges378 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make oval-ish shape in css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related