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)
.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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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%); }