how to create a custom shape like half circle without before after?

Question

I am trying to create a shape with div like the below images

I have tried to do it with border and box-shadow but unable to get the exact shape. The dot in the starting is not a problem, the only thing is the exact arc.

Answer 1

I think that is fairly similar, you can play with height and width to achieve the desired size.

You can also adjust the border-radius, the last two values to get the exact shape you want - 0% 0% 85% 85%.

If it conflicts with other content because of its size then using absolute on it would fix that issue as well.

div {
   width: 480px;
   height: 300px;
   border-radius: 0% 0% 50% 50% / 0% 0% 85% 85%;
   border: 10px solid #000;
   border-top: 10px solid transparent;
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
}

<div></div>