Comment tracer des demi cercles ?

Version imprimable

23/04/2021, 15h14
MoiStéphane

1 pièce(s) jointe(s)

Comment tracer des demi cercles ?

Bonjour
J aimerais obtenir, pour fond de div le résultat qui correspond à cette image : Pièce jointe 596434

Pour la forme générale avec les 4 coins arrondis, pas de pb border radius fait l affaire mais j aimerais savoir s il est possible et comment dessiner ces demis cercles, de chaque côté, centrés verticalement.

Merci pour votre aide
23/04/2021, 17h09
laurentSc

Bonjour,
je sais pas si c'est faisable en html/css, mais moi, je ferais cette image avec un outil de dessin (comme GIMP), puis je la mettrais en background du div...

Bonjour,
c'est typiquement un job pour les pseudos-éléments ::before et ::after.

A partir du HTML, on ne peut plus simple, suivant :

Code:

<div class="ticket"></div>

il suffit de placer les pseudos-éléments, un devant et un derrière, pour ce faire on peut utiliser le CSS qui suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.ticket {
  position: relative;         /* pour servir de référent */
  width: 12.5em;
  height: 10em;
  border-radius: .75em;
  background: #E45F50;
}
.ticket::before,
.ticket::after {
  content: "";                /* pour exister */
  display: block;             /* pour être dimensionné */
  position: absolute;         /* pour être déplacé facilement */
  top: 50%;                   /* au milieu pour les deux */
  width: 1em;                 /* dimension carré */
  height: 1em;
  border-radius: 50%;         /* forme un rond */
  font-size: 2em;             /* pour agrandir ou diminuer le rond */
  background: #FFF;
}
.ticket::before {
  left: 0;                            /* à gauche toute */
  transform: translate(-.5em, -50%);  /* déplacement à cheval */
}
.ticket::after {
  right: 0;                           /* à droite toute */
  transform: translate(.5em, -50%);   /* déplacement à cheval */
}

23/04/2021, 17h49
laurentSc

:bravo:
impressionnant
23/04/2021, 18h16
MoiStéphane

Merci, c est parfait.
23/04/2021, 18h30
NoSmoking

Citation:

Envoyé par laurentSc

impressionnant

:nono: Realistic Red Switch (Pure CSS) est impressionnant lui ;)
23/04/2021, 19h09
laurentSc

C'est vrai. Vous m'impressionnez tous les 2 !