如何使用 CSS 绘制 pacman 形状？

Question

我想用 CSS 制作一个像图像一样的椭圆，但我做不到。

我用figma制作了那个椭圆（蓝色的看起来像“pacman”），figma并没有告诉我如何做椭圆的css，只有位置，我需要知道如何绘制椭圆。

另一个（有 3 层）我将使用它作为图像，因为我打赌它比第一个椭圆更难。

提前非常感谢！

Answer 1

这是使用伪元素 和 来实现此目的的一种方法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>