Explication détaillée des techniques de dessin de motifs de flèches triangulaires à l'aide de CSS

Je souhaite modifier ce site Web récemment et je souhaite y mettre une boîte de dialogue. C'est assez simple, mais je veux que l'info-bulle ait une flèche triangulaire. Cependant, quand je pense à la nécessité d’utiliser des images et de préparer d’innombrables types de flèches de différentes couleurs et directions, c’est presque un désastre. Heureusement, Darren Waddell, le développeur principal de MooTools, m'a parlé d'une excellente technique : dessiner des flèches triangulaires avec CSS. En utilisant du CSS pur, vous n'avez besoin que de très peu de code pour créer des flèches triangulaires compatibles avec différents navigateurs !

Code CSS

/* create an arrow that points up */
p.arrow-up {   
 width: 0;    
 height: 0;    
 border-left: 5px solid transparent;  /* left arrow slant */
 border-right: 5px solid transparent; /* right arrow slant */
 border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
 font-size: 0;   
 line-height: 0;   
}   

/* create an arrow that points down */
p.arrow-down {   
 width: 0;    
 height: 0;    
 border-left: 5px solid transparent;   
 border-right: 5px solid transparent;   
 border-top: 5px solid #2f2f2f;   
 font-size: 0;   
 line-height: 0;   
}   

/* create an arrow that points left */
p.arrow-left {   
 width: 0;    
 height: 0;    
 border-bottom: 5px solid transparent;  /* left arrow slant */
 border-top: 5px solid transparent; /* right arrow slant */
 border-right: 5px solid #2f2f2f; /* bottom, add background color here */
 font-size: 0;   
 line-height: 0;   
}   

/* create an arrow that points right */
p.arrow-rightright {   
 width: 0;    
 height: 0;    
 border-bottom: 5px solid transparent;  /* left arrow slant */
 border-top: 5px solid transparent; /* right arrow slant */
 border-left: 5px solid #2f2f2f; /* bottom, add background color here */
 font-size: 0;   
 line-height: 0;   
}

La clé pour dessiner ces triangles est que vous voulez que les deux côtés du triangle pointent dans le sens Il y a des bordures épaisses sur les côtés. Le côté opposé à la flèche a également la même bordure épaisse et la couleur de ce côté est la couleur de votre triangle. Plus la bordure est épaisse, plus le triangle est grand. De cette façon, vous pouvez dessiner des flèches de différentes couleurs, tailles et orientations. Le meilleur, c’est que vous n’avez besoin que de quelques lignes de code CSS pour obtenir cet effet.

Utilisez :before et :after pour dessiner des triangles CSS

L'exemple CSS ci-dessus utilise un élément de page réel pour dessiner, mais parfois l'élément réel a également Il est utilisé , mais vous ne pouvez pas y aller et le faire fonctionner directement. Que dois-je faire ? Les triangles CSS purs peuvent en fait être dessinés à l'aide de pseudo-éléments. Voici comment le dessiner :

p.tooltip {   
 /* tooltip content styling in here; nothing to do with arrows */
}   

/* shared with before and after */
p.tooltip:before, p.tooltip:after {   
 content: ' ';   
 height: 0;   
 position: absolute;   
 width: 0;   
 border: 10px solid transparent; /* arrow size */
}   

/* these arrows will point up */

/* top-stacked, smaller arrow */
p.tooltip:before {   
 border-bottom-color: #fff;  /* arrow color */

 /* positioning */
 position: absolute;   
 top: -19px;   
 left: 255px;   
 z-index: 2;   
}   

/* arrow which acts as a background shadow */
p.tooltip:after {   
 border-bottom-color: #333;  /* arrow color */

 /* positioning */
 position: absolute;   
 top: -24px;   
 left: 255px;   
 z-index: 1;   
}

La couleur de la bordure du côté opposé à la flèche est la couleur de la flèche triangulaire. Vous n'avez pas besoin d'utiliser à la fois les pseudo-éléments :before et :after pour dessiner cette flèche - un seul suffit. Et l’autre, vous pouvez l’utiliser comme ombre d’arrière-plan ou bord d’arrière-plan pour le précédent.

J'aurais vraiment dû connaître cette technologie plus tôt ! Je pense que cette technologie simple et sans tracas s'avérera utile lors des améliorations de l'interface à l'avenir.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!