IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Comment tracer des demi cercles ?


Sujet :

CSS

  1. #1
    Membre régulier
    Homme Profil pro
    sans
    Inscrit en
    Mars 2020
    Messages
    182
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mars 2020
    Messages : 182
    Points : 117
    Points
    117
    Par défaut Comment tracer des demi cercles ?
    Bonjour
    J aimerais obtenir, pour fond de div le résultat qui correspond à cette image : Nom : bg2.png
Affichages : 124
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

  2. #2
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 723
    Points
    5 723
    Billets dans le blog
    1
    Par défaut
    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...
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    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 */
    }

  4. #4
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 723
    Points
    5 723
    Billets dans le blog
    1
    Par défaut

    impressionnant
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

  5. #5
    Membre régulier
    Homme Profil pro
    sans
    Inscrit en
    Mars 2020
    Messages
    182
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : Mars 2020
    Messages : 182
    Points : 117
    Points
    117
    Par défaut
    Merci, c est parfait.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Citation Envoyé par laurentSc
    impressionnant
    Realistic Red Switch (Pure CSS) est impressionnant lui

  7. #7
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 339
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 339
    Points : 5 723
    Points
    5 723
    Billets dans le blog
    1
    Par défaut
    C'est vrai. Vous m'impressionnez tous les 2 !
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

    Si la discussion est résolue, merci de cliquer sur le bouton

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment tracer des courbes en fonction du temps ?
    Par petitclem dans le forum Qwt
    Réponses: 1
    Dernier message: 28/11/2011, 18h07
  2. comment tracer des tableaux de bords?
    Par mayna87 dans le forum Développement Web en Java
    Réponses: 1
    Dernier message: 07/05/2010, 16h14
  3. Comment tracer des courbes ?
    Par moukah2 dans le forum Débuter
    Réponses: 5
    Dernier message: 08/11/2007, 21h26
  4. Animer des demi-cercles sur une demi-sphère
    Par Delisle dans le forum MATLAB
    Réponses: 4
    Dernier message: 01/09/2007, 18h33
  5. comment tracer des traits à la souris ?
    Par FoxDeltaSierra dans le forum Général Conception Web
    Réponses: 2
    Dernier message: 01/09/2005, 17h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo