如何使用 CSS 绘制吃豆人形状？

Question

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

我用 figma 做了那个椭圆（蓝色的看起来像 "pacman"），figma 没有告诉我如何做椭圆的 css，只有位置和我需要的知道如何画椭圆。

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

非常感谢您！！

Answer 1

您可以使用 HTML5 canvas 来执行此操作：

<canvas id="thecanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('thecanvas');

if(canvas.getContext) 
{
  var ctx = canvas.getContext('2d');
  drawEllipse(ctx, 10, 10, 100, 60);
  drawEllipseByCenter(ctx, 60,40,20,10);
}

function drawEllipseByCenter(ctx, cx, cy, w, h) {
  drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}

function drawEllipse(ctx, x, y, w, h) {
  var kappa = .5522848,
      ox = (w / 2) * kappa, // control point offset horizontal
      oy = (h / 2) * kappa, // control point offset vertical
      xe = x + w,           // x-end
      ye = y + h,           // y-end
      xm = x + w / 2,       // x-middle
      ym = y + h / 2;       // y-middle

  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);

  ctx.stroke();
}

</script>

来源：How to draw an oval in html5 canvas?

Answer 2

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

Answer 3

您可以使用剪辑路径将那部分剪掉

body{
  display:flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

div {
  width: 140px;
  height: 140px;
  background: linear-gradient(purple,blue);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 50%, 50% 50%, 50% 0%);
  border-radius: 50%;
  
}

<div></div>

Answer 4

你也可以使用伪类来创建这个

div {
  width: 200px;
  height: 200px;
  position: relative;
}

div:after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100%;
  background: linear-gradient(purple, blue);
  border-radius: 500px 0 0 500px;
}

div:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  background-image: linear-gradient(30deg, blue, purple);
  border-radius: 0 0 500px 500px;
  background-position-x: 90px;
}

<div></div>

Answer 5

这是另一个具有多个背景的想法，没有额外的元素并且具有透明度：

.pacman {
  width:100px;
  height:100px;
  box-sizing:border-box;
  padding-right:50px;
  border-radius:50%;
  background:
    linear-gradient(to right,blue, purple) top/100% 50%,
    linear-gradient(to right,blue, purple) padding-box content-box;
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="pacman"></div>

这里是垂直渐变：

.pacman {
  width:100px;
  height:100px;
  box-sizing:border-box;
  padding-bottom:50px;
  border-radius:50%;
  background:
    linear-gradient(to bottom,yellow, red) left/50% 100%,
    linear-gradient(to bottom,yellow, red) padding-box content-box;
  background-repeat:no-repeat;
}

body {
  background:pink;
}

<div class="pacman"></div>

这里是随机渐变，对于这种情况我会考虑伪元素。

.pacman {
  width:100px;
  height:100px;
  box-sizing:border-box;
  padding-right:50px;
  border-radius:50%;
  background-image:linear-gradient(65deg,yellow, blue, purple);
  background-clip:content-box;
  position:relative;
  overflow:hidden;
}
.pacman:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:50%;
  background-image:inherit;
  background-size:100% 200%;
}

body {
  background:pink;
}

<div class="pacman"></div>

如何使用 CSS 绘制吃豆人形状？

How to draw a pacman shape using CSS?

css

css-shapes