half moon geometric shape with css

Issue

I'm trying to create a half moon as shown in the image below

I got this result, but I can't get to the result in the image

.meia-lua {
      width: 50px;
            height: 40px;
            background-color: #000;
            border-radius: 100% 100% 50% 50%;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            margin-left: auto;
            margin-right: auto;
            color: #fff;
            text-align: center;
            line-height: 40px;
}

<div class="meia-lua">1</div>

I need help, thank you.

Solution

<div class="meia-lua"></div>

.meia-lua {
      width: 200px;
      height: 120px;
      background-color: #EE4849;
      border-radius: 50rem 50rem 15rem 15rem;
      margin-left: auto;
      margin-right: auto;
}

1. I don't know why you were using so many unnecessary properties, based on your use case, we don't need anything else except what I have used here.

2. Instead of using %, using rem or px will be a better and more appropriate solution. The desired output could have been obtained with % but this is a better solution.

Answered By - Md Aman Khan