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

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 https://jsfiddle.net/fm6r943u/ — Huangism, Mar 25 '19 at 17:22

score 4 · Accepted Answer · answered Mar 25 '19 at 17:24

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>

score 3 · Answer 2 · answered Mar 25 '19 at 17:24

3

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>

answered Mar 25 '19 at 17:24

ashish singh

6,526
2
15
35

1

No IE or Edge support. – Andy Hoffman Mar 25 '19 at 17:27

score 0 · Answer 3 · answered Mar 25 '19 at 17:41

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>

Temani Afif · Answer 4 · 2019-03-25T20:50:09.390

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>

Bachrul uluum · Answer 5 · 2022-11-16T01:55:14.140

0

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>

edited Nov 16 '22 at 01:55

answered Aug 22 '22 at 15:24

Bachrul uluum

18
3

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](/help/how-to-answer). – Neeraj Aug 26 '22 at 06:43

score -2 · Answer 6 · edited Jun 20 '20 at 09:12

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?

How to draw a pacman shape using CSS?

6 Answers6