How to draw a pacman shape using CSS?

Question

I want to do an ellipse like the image with CSS, but I can't.

I've made that ellipse (blue one looking like "pacman") with figma and figma doesn't tell me how to do the css of the ellipse, only the position and I need to know how to draw the ellipse.

The other one (with 3 layers) I'll use it as an image because I bet it's harder then the first ellipse.

Thank you so much in advance!!

Answer 1

Here is one way to accomplish this using a pseudo element and overflow: hidden:

.ellipse {
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(#171b6e,#2732c6);
  position: relative;
  width: 100px;
  height: 100px;
}

.ellipse::after {
  content: '';
  position: absolute;
  width: 50%;  
  top: 50%;
  bottom: 0;
  right: 0;
  background-color: black;
}

body {
  background-color: black;
}

<div class="ellipse"></div>