Comment créer une forme de fil d'ariane

Question

J'ai essayé de créer un fil d'Ariane en forme de flèche qui a un point à une extrémité et une queue à l'autre. Fondamentalement, la mise en page est: [queue] [corps] [point], où la queue & point ne sont que des triangles.

J'ai réussi à créer [body] [point] en utilisant css, mais je suis coincé en essayant de faire fonctionner la queue. Est-ce que cela peut aussi être fait avec css?

DEMO: https://plnkr.co/edit/mQELiNgVCe6ZoTepCtr9?p=preview

Le code HTML:

<div style="font-size:0"> 
    <div class="arrow-tail"></div> 
    <div class="arrow-body">HELLO WORLD!</div> 
    <div class="arrow-point"></div> 
</div> 

Le CSS:

.arrow-point { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 15px solid #777777; 
} 
.arrow-body { 
    font-family: verdana; 
    font-size:15px; 
    display: inline-block; 
    background-color: #777777; 
    color:white; 
    padding:2px 6px 2px 16px; 
    height:20px; 
    vertical-align:top; 
} 
.arrow-tail { 
    float:left; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 15px solid #EEEEEE; 
} 

Answer 1

Il est un peu difficile de comprendre comment vous voulez que le résultat final pour ressembler à partir des informations vous avez fourni dans le message original. Mais je fais quelques suppositions et je crois que vous voulez qu'il ressemble à ceci:

Vous pouvez y parvenir en mettant la queue à position: absolute.

Le CSS final de la queue serait la suivante:

.arrow-tail { 
    position: absolute; 
    border-top: 12px solid transparent; 
    border-bottom: 12px solid transparent; 
    border-left: 15px solid #fff; 
} 

Notez également que si vous voulez déplacer autour de votre queue avec le top:, right:, bottom:, left: attributs, alors vous devez vous assurer que le conteneur div est défini sur position: relative.