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 :

Dessiner des flèches avec CSS


Sujet :

CSS

  1. #1
    Membre régulier
    Inscrit en
    Mai 2008
    Messages
    195
    Détails du profil
    Informations personnelles :
    Âge : 38

    Informations forums :
    Inscription : Mai 2008
    Messages : 195
    Points : 82
    Points
    82
    Par défaut Dessiner des flèches avec CSS
    Bonjour,

    Je viens à vous car je souhaite "dessiner" avec CSS.
    Cela me permet entre autres de pratiquer et de voir ce que je n'ai pas bien compris...

    Et j'ai un petit soucis:
    Nom : Capture.PNG
Affichages : 719
Taille : 12,0 Ko

    1) Je suis parti d'un rectangle
    2) J'ai créé des triangles gauche en haut et en bas ou dessiner une pointe au rectangle.
    Jusque la... tout va bien...

    Mais la suite... Mon texte doit aller au milieu du rectangle noir et il est en dessous...
    Et mes deux autres triangles doivent être à droite pour réalise un effet de fleche à droite et sont aussi en dessous...

    Code html : 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
    <body>
       <div class = "rectangle_noir">
         <div class = "rectangle_noir_1">
         <div class = "triangle_gauche_haut">
         </div>
         <div class = "triangle_gauche_bas">
        </div>
         </div>
         <div class = "rectangle_noir_2">
           <h1>TITRE</h1>
         </div>
         <div class = "rectangle_noir_3">
         <div class = "triangle_droit_haut">
         </div>
         <div class = "triangle_droit_bas">
        </div>
       </div>
       </div>
    </body>

    Code CSS : 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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    .rectangle_noir 
    {
      display: inline-block;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 500px;
      height: 150px;
      background: #000000;
    }
     
    .rectangle_noir_1
    {
      display: column;
      width: 20%;
    }
     
    .rectangle_noir_2
    {
      display: column;
      width: 60%;
    }
     
    h1
    {
      color: red;
    }
     
    .rectangle_noir_3
    {
      display: column;
      width: 20%;
    }
     
    .triangle_gauche_haut
    {
     height : 0;
     width : 0;
     border-right : 0px solid;
     border-bottom : 75px solid black;
     border-left : 80px solid white;
    }
     
    .triangle_gauche_bas
    {
     height : 0;
     width : 0;
     border-right : 80px solid black;
     border-bottom : 75px solid white;
     border-left : 0 px solid white;
    }
     
    .triangle_droit_haut
    {
     height : 0;
     width : 0;
     border-right : 80px solid black;
     border-bottom : 75px solid white;
     border-left : 0 px solid white;
    }
     
    .triangle_droit_bas
    {
     height : 0;
     width : 0;
     border-right : 0px solid;
     border-bottom : 75px solid black;
     border-left : 80px solid white;
    }

    Des idées de ou j'ai pu m’emmêler les pinceaux?

    D'avance merci pour votre aide

  2. #2
    Membre régulier
    Inscrit en
    Mai 2008
    Messages
    195
    Détails du profil
    Informations personnelles :
    Âge : 38

    Informations forums :
    Inscription : Mai 2008
    Messages : 195
    Points : 82
    Points
    82
    Par défaut
    Bonjour,

    J'ai un peu avancé sur mon dessin.
    J'ai le design attendu.
    Après à voir ce que cela va donner avec un côté responsive

    Je poste le code mis à jour ici:
    Code HTML : 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
    <body>
       <div class = "rectangle_noir">
         <div class = "rectangle_noir_1">
         <div class = "triangle_gauche_haut">
         </div>
         <div class = "triangle_gauche_bas">
        </div>
         </div>
         <div class = "rectangle_noir_2">
             <h1>TITRE</h1>
         </div>
         <div class = "rectangle_noir_3">
         <div class = "triangle_droit_haut">
         </div>
         <div class = "triangle_droit_bas">
        </div>
       </div>
       </div>
    </body>

    Code CSS : 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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    .rectangle_noir 
    {
      display: flex;
      width:25%;
    }
     
    .rectangle_noir_1
    {
      display: column;
      width: 20%;
    }
     
    .rectangle_noir_2
    {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60%;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 500px;
      height: 80px;
      background: #000000;
    }
     
    h1
    {
      color: #FFFFFF;
    }
     
    .rectangle_noir_3
    {
      display: column;
      width: 20%;
    }
     
    .triangle_gauche_haut
    {
     height : 0;
     width : 0;
     border-right : 0px solid;
     border-bottom : 40px solid black;
     border-left : 80px solid white;
    }
     
    .triangle_gauche_bas
    {
     height : 0;
     width : 0;
     border-right : 80px solid black;
     border-bottom : 40px solid white;
     border-left : 0 px solid white;
    }
     
    .triangle_droit_haut
    {
     height : 0;
     width : 0;
     border-right : 80px solid white;
     border-bottom : 40px solid black;
     border-left : 0 px solid black;
    }
     
    .triangle_droit_bas
    {
     height : 0;
     width : 0;
     border-right : 0px solid;
     border-bottom : 40px solid white;
     border-left : 80px solid black;
    }

    Ainsi que le rendu actuel:
    Nom : Capture.PNG
Affichages : 555
Taille : 2,2 Ko

    J'ai beaucoup de mal à comprendre la partie display...
    Je la fais en mode bidouille mais ce n'est pas clair pour moi.
    Peut-être en revenant à la base avec les balises de types inline et block et le comportement que cela entraine?

    Je continue d'avancer, je vais essayer de faire quelqque chose de plus technique.
    Du coup je conserve le sujet ouvert car y'a des chances que je galère

  3. #3
    Expert confirmé
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    Juin 2006
    Messages
    2 447
    Détails du profil
    Informations personnelles :
    Âge : 54
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2006
    Messages : 2 447
    Points : 4 587
    Points
    4 587
    Par défaut
    peut-etre que les clip-path pourront t'aider
    developer.mozilla.org/fr/docs/Web/CSS/clip-path
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  4. #4
    Membre régulier
    Inscrit en
    Mai 2008
    Messages
    195
    Détails du profil
    Informations personnelles :
    Âge : 38

    Informations forums :
    Inscription : Mai 2008
    Messages : 195
    Points : 82
    Points
    82
    Par défaut
    Je regarde cela merci

  5. #5
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    assurément tu n'a pas choisi la façon la plus simple d'arriver à tes fins, la multiplication des éléments engendre souvent le cahot.

    Comme suggéré par Doksuri, l'utilisation de la propriété clip-path est une, bonne, solution parmi d'autres comme l'utilisation des pseudo-éléments ou encore l'utilisation des fonctions linear-gradient pour la réalisation du background.

    Voici un exemple d'application des pseudo-éléments et de clip-path :
    Code html : 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
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[CSS] Arrière plan en forme de flèche</title>
    <meta name="Author" content="NoSmoking">
    <meta name="DVP-discussion" content="d2131935">
    <meta name="description" content="[CSS] Réalisation d'un arrière plan en forme de flèche sans élément HTML ajouté">
    <style>
    html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
    h1, h2, h3 {margin: .25em 0;color: #069;}
    time {float: right;margin: .5em;font-size: 0.9em;color: #888;}
    main {display: block;margin: auto;max-width: 60em;}
    section {position: relative;margin: 0 1em 1em;}
    section > :not(h2) {margin-left: 1em;}
    </style>
    <style>
    h1 {
      color: inherit;
    }
    .mw15 {
      min-width: 15em;
    }
     
    /*=-- arrow --=*/
    .rect-clip-path,
    .rect-pseudo {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      width: max-content;
      height: 5em;
      margin-bottom: 1em;
      padding: 0 1em;
      color: #0F0;
      background-color: #060;
    }
    /*=-- with pseudo-element --=*/
    .rect-pseudo-arrow-left:before,
    .rect-pseudo-arrow-right:after {
      content: "";
      z-index: -1;
      position: absolute;
      top: 50%;
      height: 71%;
      background-color: inherit;
      aspect-ratio: 1 / 1;
    }
    .rect-pseudo-arrow-right:after {
      right: 0;
      transform: rotate(45deg) translate(0, -71%);
    }
    .rect-pseudo-arrow-left:before {
      left: 0;
      transform: rotate(315deg) translate(0%, -71%);
    }
    /*=-- with clip-path --=*/
    .rect-clip-path {
      --pad: 2.5em;
    }
    .rect-clip-path-arrow-left {
      padding-left: var(--pad);
      clip-path: polygon(0 50%,var(--pad) 0,100% 0,100% 100%,var(--pad) 100%);
    }
    .rect-clip-path-arrow-right {
      --posRight: calc(100% - var(--pad));
      padding-right: var(--pad);
      clip-path: polygon(0 0,var(--posRight) 0,100% 50%,var(--posRight) 100%,0 100%);
    }
    .rect-clip-path-arrow-left-right {
      --posRight: calc(100% - var(--pad));
      padding-right: var(--pad);
      padding-left: var(--pad);
      clip-path: polygon(0 50%,var(--pad) 0,var(--posRight) 0,100% 50%,var(--posRight) 100%,var(--pad) 100%);
    }
    </style>
    </head>
    <body>
      <main>
        <section>
          <h2>Arrow with pseudo-élément</h2>
          <div class="rect-pseudo rect-pseudo-arrow-left mw15">
            <h1>Arrow left</h1>
          </div>
          <div class="rect-pseudo rect-pseudo-arrow-right mw15">
            <h1>Arrow right</h1>
          </div>
          <div class="rect-pseudo rect-pseudo-arrow-left rect-pseudo-arrow-right mw15">
            <h1>Arrow left & right</h1>
          </div>
        </section>
        <section>
          <h2>Arrow with clip-path</h2>
          <div class="rect-clip-path rect-clip-path-arrow-left mw15">
            <h1>Arrow left</h1>
          </div>
          <div class="rect-clip-path rect-clip-path-arrow-right mw15">
            <h1>Arrow right</h1>
          </div>
          <div class="rect-clip-path rect-clip-path-arrow-left-right mw15">
            <h1>Arrow left & right</h1>
          </div>
        </section>
      </main>
    </body>
    </html>
    J'ai une petite préférence pour l'utilisation des pseudo-éléments attendu que l'on peut ajouter une ombre portée via un filter: drop-shadow(), non possible avec clip-path, et parce que la géométrie de la flèche reste constante quelque soit la hauteur liée au contenu.

    Je te laisse juger.

  6. #6
    Expert confirmé
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 335
    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 335
    Points : 5 704
    Points
    5 704
    Billets dans le blog
    1
    Par défaut
    Bonsoir,

    déjà que pas très bon en CSS, quand je vois la complexité de ton code, NoSmoking, je me dis pas la peine ; j'y arriverai jamais...
    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

Discussions similaires

  1. Dessiner des flèches avec vba
    Par gabonbrux dans le forum Général VBA
    Réponses: 3
    Dernier message: 11/07/2009, 18h45
  2. Dessiner des Courbes avec extjs
    Par bj304075 dans le forum Ext JS / Sencha
    Réponses: 1
    Dernier message: 28/05/2009, 15h42
  3. dessiner des arbres avec java
    Par manelisg dans le forum 2D
    Réponses: 13
    Dernier message: 09/04/2009, 17h29
  4. Dessiner des flèches en "toile d'araignée"
    Par nounoute dans le forum Word
    Réponses: 2
    Dernier message: 05/10/2008, 11h23
  5. Dessiner des points avec PyQt
    Par Naoli dans le forum PyQt
    Réponses: 1
    Dernier message: 15/01/2008, 19h38

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