CSS3 - Style un span comme une flèche carrée

Question

J'étais fatigué de styliser une simple travée avec différents textes à l'intérieur (Texte, Big Text, ..) à une Square-Arrow (voir Picutre).

J'ai essayé en utilisant un fond simple, une frontière d'une frontière-Image. Mais aucune solution n'a fonctionné comme propper. En utilisant un fond, vous aurez des problèmes si le texte devient plus grand, à cause de la strech. En utilisant une bordure, vous ne pouvez pas obtenir cette flèche/triangle sur le côté droit. An the Border-Image m'a donné un résultat effrayant ...

Le plus gros problème de mon côté est le texte dynamique. Je dois définir différents textes avec une longueur différente de la durée. Donc, si j'ai un plus grand texte, il ne devrait pas étirer le fond du trou, parce que c'est très effrayant.

Y at-il des astuces ou avez-vous des Tipps pour obtenir une bonne solution?

Merci, Kevin

Answer 1

Vous pouvez utiliser un seul ::after pseudo-élément pour créer cet effet.

La partie intelligente utilise transform: rotate(45deg); pour transformer le pseudo-élément 45 degrés, ce qui crée la flèche carrée.

.arrow { 
 
display: inline-block; 
 
position: relative; 
 
margin: 0 36px 36px 0; 
 
padding: 6px 0 6px 6px; 
 
font-size: 18px; 
 
line-height: 18px; 
 
font-family: arial, helvetica, sans-serif; 
 
border: 2px solid rgb(0,0,0); 
 
border-right: none; 
 
border-radius: 5px 0 0 5px; 
 
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4); 
 
} 
 

 
.arrow::after { 
 
content:''; 
 
position: absolute; 
 
display: inline-block; 
 
top: 3px; 
 
right: -12px; 
 
width: 22px; 
 
height: 22px; 
 
border-top: 2px solid rgb(0,0,0); 
 
border-right: 2px solid rgb(0,0,0); 
 
box-shadow: 4px 0 2px -2px rgba(0,0,0,0.4); 
 
transform: rotate(45deg); 
 
}

<span class="arrow">Text</span> 
 
<span class="arrow">Big Text</span> 
 
<span class="arrow">Very Big Text</span> 
 
<span class="arrow">Quite Spectacularly Big Text</span> 
 
<span class="arrow">Phenomenally, Astoundingly, Almost Preposterously Big Text</span>

Answer 2

Vous pouvez utiliser :before et :after pour dessiner un triangle. L'un sera noir et le second blanc au-dessus, un peu plus petit.

Voici un extrait

body{ 
 
padding:30px; 
 
} 
 
span { 
 
    font:20px/20px arial,sans-serif; 
 
    padding:10px; 
 
    border:1px solid black; 
 
    background:white; 
 
    position:relative; 
 
} 
 
span:after { 
 
content: ""; 
 
display: block; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 22.5px 0px 22.5px 34px; 
 
border-color: transparent transparent transparent #fff; 
 
position: absolute; 
 
top: 0; 
 
right: -34px; 
 
margin: 0; 
 
padding: 0; 
 
box-sizing: border-box; 
 
} 
 
span:before { 
 
content: ""; 
 
display: block; 
 
width: 0; 
 
height: 0; 
 
border-style: solid; 
 
border-width: 23.5px 0px 23.5px 35px; 
 
border-color: transparent transparent transparent #000; 
 
position: absolute; 
 
top: -1px; 
 
right: -35px; 
 
margin: 0; 
 
padding: 0; 
 
box-sizing: border-box; 
 
z-index: -1; 
 
}

<div><span>Hello, this is my text</span></div>

qui était juste un test, je did'nt vérifier dans tous les navigateurs pour la compatibilité, mais il y a une façon de le faire.

Si la hauteur est toujours le même, vous pouvez également utiliser une image et faire apparaître grâce à une :after