Comment tracer des demi cercles ?

**MoiStéphane** · 23/04/2021, 15h14

Bonjour
J aimerais obtenir, pour fond de div le résultat qui correspond à cette image : Nom : bg2.png
Affichages : 229
Taille : 2,1 Ko

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

**laurentSc** · 23/04/2021, 17h09

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

**NoSmoking** · 23/04/2021, 17h12

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
}