css - 如何使用 CSS 绘制 pacman 形状？

Question

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

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

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

非常感谢你！

标签： csscss-shapes

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>