Vous pouvez voir la boîte avec des flèches comme indiqué dans l'image ci-dessus. Cette flèche peut être réalisée via des images d'arrière-plan ou des CSS. Cet article présente trois boîtes rapides avec des flèches via CSS.
1. Passez l'attribut de bordure
Idée: deux triangles, les deux triangles sont différents de 1px comme frontière en positionnant.
2.CSS3 Transform
Idée: faites d'abord un carré avec la même couleur sur deux côtés, puis tournez-le à un certain angle pour en faire un triangle.
3. caractères spéciaux '♦'
Pensée: La première moitié des personnages spéciaux est divulguée, et ils ressemblent à des triangles
1. Passez l'attribut de bordure:
Faisons d'abord une div avec une largeur et une hauteur de 10px, et la bordure est également 10px.
Largeur: 10px; hauteur: 10px; Border: 10px solide; Color à la frontière: bleu jaune vert rouge;
Comme indiqué dans la figure ci-dessous:
Le blanc au milieu de l'image est la largeur et la hauteur que nous définissons. S'il est défini sur 0px, que se passera-t-il? , comme indiqué ci-dessous:
À l'heure actuelle, nous pouvons définir les couleurs des bordures gauche et inférieure pour être transparente ou de la même couleur que la couleur d'arrière-plan, et le triangle que nous voulons sortira. Comme indiqué dans la figure ci-dessous:
Maintenant réalisons l'effet sur la première image:
CSS:
.info {margin-top: 50px; Position: relative; Largeur: 200px; hauteur: 50px; hauteur de ligne: 60px; Contexte: # F6F1B3; Box-Shadow: 1px 2px 3px # e9d985; Border: 1px solide # dace7c; Border-Radius: 4px; Texte-aligne: Centre; Couleur: rouge; } .nav {position: absolue; Gauche: 30px; débordement: caché; Largeur: 0; hauteur: 0; largeur de bordure: 10px; Style de bordure: solide en pointillé en pointillés; } .nav-border {top: -20px; Color à la frontière: transparent transparent # dace7c transparent; } .nav-background {top: -19px; Color à bordure: transparent transparent # f6f1b3 transparent; }HTML:
<div> <span> Message de l'invite </span> <div> </div> <div> </div> </div>
2. Transformation CSS3
Nous faisons d'abord une boîte Div avec deux bordures adjacentes avec la même couleur et les deux autres bordures avec 0px. Comme indiqué dans l'image:
Faites pivoter la boîte de 45 degrés pour obtenir l'effet d'invite du triangle.
CSS:
.info {margin-top: 50px; Position: relative; Largeur: 200px; hauteur: 50px; hauteur de ligne: 60px; Contexte: # F6F1B3; Box-Shadow: 1px 2px 3px # e9d985; Border: 1px solide # dace7c; Border-Radius: 4px; Texte-aligne: Centre; Couleur: rouge; } .nav {position: absolue; en haut: -8px; Gauche: 30px; débordement: caché; Largeur: 13px; hauteur: 13px; Contexte: # F6F1B3; Border-Left: 1px solide # dace7c; Border-top: 1px solide # dace7c; -Webkit-Transform: Rotate (45Deg); -Moz-transform: Rotation (45DEG); -o-transform: Rotation (45Deg); transformée: rotation (45deg); }HTML:
<div> <span> Message de l'invite </span> <div> </div> </div>
3. caractères spéciaux '♦'
'♦' est un caractère spécial, qui équivaut à un personnage, donc la taille est définie par la taille d'une police pour réaliser l'effet de la première image:
CSS:
.info {margin-top: 50px; Position: relative; Largeur: 200px; hauteur: 50px; hauteur de ligne: 60px; Contexte: # F6F1B3; Box-Shadow: 1px 2px 3px # e9d985; Border: 1px solide # dace7c; Border-Radius: 4px; Texte-aligne: Centre; Couleur: rouge; } .nav {position: absolue; Gauche: 30px; débordement: caché; Largeur: 24px; hauteur: 24px; Police: normal 24px "Microsoft Yahei"; } .nav-border {top: -17px; Couleur: # DACE7C; } .nav-background {top: -16px; Couleur: # F6F1B3; }HTML:
<div> <span> Message de l'invite </span> <v> ♦ </div> <div> ♦ </div> </div>
Vous trouverez ci-dessous une démo compatible avec IE5.5 +, Chrome, Firfox et d'autres navigateurs. Si vous l'utilisez, vous pouvez dire directement l'examen à votre propre projet.
<! Doctype html> <html> <éadf> <tôme> </ title> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <style> div.Container {position: absolue; En haut: 30px; Gauche: 40px; taille de police: 9pt; Affichage: bloc; hauteur: 100px; Largeur: 200px; Color en arrière-plan: transparent; * Border: 1px solide # 666; } s {position: absolue; En haut: -20px; * en haut: -22px; Gauche: 20px; Affichage: bloc; hauteur: 0; Largeur: 0; taille de police: 0; hauteur de ligne: 0; Color à la frontière: transparent transparent # 666 transparent; Style de bordure: solide en pointillé en pointillé en pointillé; largeur de bordure: 10px; } i {position: absolue; en haut: -9px; * en haut: -9px; Gauche: -10px; Affichage: bloc; hauteur: 0; Largeur: 0; taille de police: 0; hauteur de ligne: 0; Color à bordure: transparent transparent transparent transparent; Style de bordure: solide en pointillé en pointillé en pointillé; largeur de bordure: 10px; } .Content {border: 1px solide # 666; -Moz-Border-Radius: 3px; -Webkit-Border-Radius: 3px; Position: absolue; Color d'arrière-plan: #FFF; Largeur: 100%; hauteur: 100%; rembourrage: 5px; * en haut: -2px; * Border-top: 1px solide # 666; * Border-top: 1px solide # 666; * Border-Top: 1px solide * Border-Left: Aucun; * Border-droite: aucun; * Hauteur: 102px; Box-Shadow: 3px 3px 4px; -moz-box-shadow: 3px 3px 4px; -Webkit-box-shadow: 3px 3px 4px; / * Pour IE 5.5 - 7 * / Filtre: PROGID: DxiageTransform.microsoft.shadow (force = 4, direction = 135, color = '# 999999'); / * Pour ie 8 * / -ms-filter: "Progid: dxiageTransform.microsoft.shadow (force = 4, direction = 135, color = '# 999999')"; } </ style> </ head> <body> <div> <div> <div> Hello World! </div> <s> <i> </i> </s> </div> </ body> </html>Image de reproduction:
résumé:
La boîte invite avec des flèches apporte de bons résultats à l'interaction utilisateur. Cet article présente trois méthodes. Si vous avez d'autres méthodes à @ME, je serais très reconnaissant. J'espère que cet article peut vous aider.