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!!

Hampstead

use svg to draw in html pages – Infect

the packman one could just be a circle with a square in the bottom right corner. A circle is just a square with border radius of 50%. here is a sample jsfiddle.net/fm6r943u – Dextro

@MateusMartins thanks for the tip! I'll do it – Hampstead

One sketch: jsfiddle.net/1q360kLc – Elusive

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>

Sallet

Answer 2

you can use clip path to cut that portion out

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>

Penman

No IE or Edge support. – Sallet

Answer 3

You can also use pseudo classes to create this

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>

Christiniachristis

Answer 4

Here is another idea with multiple background, without extra element and with transparency:

.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>

Here is with vertical gradient:

.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>

Here is with a random gradient, for this case I will consider a pseudo element.

.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>

Continuo

Answer 5

here is some code if you use Tailwind css referring to : https://tailwindcss.com/docs/

<div
    class="w-52 h-52 bg-darkblue rounded-full overflow-hidden -rotate-45 relative after:absolute after:w-1/2 after:h-1/2 after:top-1/2 after:bottom-0 after:right-0 after:bg-white">
</div>

Boustrophedon

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Coburn

Answer 6

You may use HTML5 canvas to do this:

<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>

Source: How to draw an oval in html5 canvas?

Selfpronouncing