Créez des panneaux de signalisation évolutifs en utilisant HTML, CSS et SVG

Question

Je souhaite réaliser un bouton en forme de panneau routier (un rectangle avec une pointe).

_______
|       \
|_______/

Je souhaite écrire dynamiquement du texte dans un logo, chaque texte ayant une longueur différente. Si j'essaie cela en utilisant uniquement le graphique comme graphique d'arrière-plan, les flèches sont mises à l'échelle et compressées/étirées en conséquence. Mettez donc le texte dans un div normal et utilisez CSS :after pour ajouter la flèche au format SVG. La flèche doit être complètement remplie, c'est-à-dire que je n'ai pas à me soucier de problèmes de cadrage. (J'ai laissé le SVG noir pour une visibilité accrue) Mon premier problème est que la flèche est toujours dans le bloc et non derrière. J'ai résolu ce problème en utilisant position:absolute;. Mais un réglage plus précis a échoué car je ne pouvais pas me positionner en fonction de l'extrémité des blocs gauche : et droite :

Question :

• Comment puis-je le positionner pour que le triangle se connecte toujours exactement à l'extrémité de la boîte. (Pas de blanc au milieu)

• Comment mettre à l'échelle SVG en fonction de la taille (hauteur) de la boîte. (pour que les bords s'ajustent) (peut-être aussi en tenant compte du rembourrage)

Ou suis-je complètement sur la mauvaise voie avec l'approche after, et dois-je ajouter la flèche (sous forme de fichier SVG) directement dans le code HTML après le texte (le texte est entouré de ) et tout envelopper avec ? Mais en réalité, je veux éviter cela et l'insertion via CSS serait préférable. Mais si c'est un moyen plus utile, je suis d'accord.

.querverweis{
    background-color: #005000;
    color: #ffffff;
    display: inline-block;
     margin: 10px  
     margin-left: -10px 
}

.querverweis:after {
  content:  url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='40' viewBox='0 0 66 100' xml:space='preserve'%3E%3Cpath d='M0 0 L66 50 L0 100 L0 0' style='fill=rgb(0,0,0)'/%3E%3C/svg%3E%0A");   
  position: absolute; 
}

<div class="querverweis">Test</div>

Answer 1

Comme A Haworth l'a mentionné, le chemin de détourage pourrait être plus simple. Pour cela, ajoutez quelques padding ，以便始终为箭头所在的位置留出空间，然后将 clip-path à droite du bouton et ajoutez l'intégralité de l'élément à

.querverweis {
  position: relative;
  background-color: #005000;
  color: #ffffff;
  display: inline-block;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  clip-path: polygon(0% 0%, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0% 100%);
}

Test




Test with more text




Test with multi-line text