3
votes

Comment dessiner une forme pacman en utilisant CSS?

Je veux faire une ellipse comme l'image avec CSS, mais je ne peux pas.

J'ai fait cette ellipse (une bleue ressemblant à "pacman") avec figma et figma ne me dit pas comment faire le CSS de l'ellipse, seulement la position et j'ai besoin de savoir comment dessiner l'ellipse.

L'autre (avec 3 couches) je vais l'utiliser comme image car je parie que c'est plus dur que la première ellipse.

Merci beaucoup d'avance !!

css css-shapes

4 commentaires

utiliser svg pour dessiner dans des pages html

le packman un pourrait être juste un cercle avec un carré dans le coin inférieur droit. Un cercle est juste un carré avec un rayon de bordure de 50%. voici un exemple de jsfiddle.net/fm6r943u

@MateusMartins merci pour le tuyau! Je vais le faire

Une esquisse: jsfiddle.net/1q360kLc

5 Réponses :

-2
votes

Vous pouvez utiliser le canevas HTML5 pour ce faire:

<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: Comment dessiner un ovale en html5 toile?

0 commentaires

3
votes

Voici une façon d'accomplir cela en utilisant un pseudo élément et overflow: hidden :

<div class="ellipse"></div>

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

0 commentaires

2
votes

vous pouvez utiliser le chemin du clip pour couper cette partie

<div></div>

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%;
  
}

1 commentaires

Pas de support IE ou Edge.

0
votes

Vous pouvez également utiliser des pseudo-classes pour créer ce

<div></div>

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

0 commentaires

0
votes

Voici une autre idée avec plusieurs arrière-plans, sans élément supplémentaire et avec transparence:

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

Voici avec un dégradé vertical:

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

Voici avec un dégradé aléatoire, pour ce cas je considérerai un pseudo élément.

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

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

0 commentaires