Sie können das Feld mit Pfeilen sehen, wie im obigen Bild gezeigt. Dieser Pfeil kann durch Hintergrundbilder oder CSS realisiert werden. In diesem Artikel werden drei Eingabeaufentwicklungskästen mit Pfeilen über CSS eingeführt.
1. Übergeben Sie das Grenzattribut
Idee: Zwei Dreiecke, die beiden Dreiecke unterscheiden sich von 1PX als Grenze durch Positionierung.
2.CSS3 Transformation
Idee: Machen Sie zuerst ein Quadrat mit der gleichen Farbe auf zwei Seiten und drehen Sie es dann in einen bestimmten Winkel, um es zu einem Dreieck zu machen.
3. Sonderzeichen '♦'
Gedanke: Die erste Hälfte der Sonderzeichen ist durchgesickert und sie sehen aus wie Dreiecke
1. Übergeben Sie das Grenzattribut:
Lassen Sie uns zunächst eine DIV sowohl mit Breite als auch mit einer Höhe von 10px erstellen, und der Rand ist ebenfalls 10px.
Breite: 10px; Höhe: 10px; Grenze: 10px fest; Grenzfarbe: Rotes Grüngelbblau;
Wie in der Abbildung unten gezeigt:
Die Lücke in der Mitte des Bildes ist die Breite und Höhe, die wir eingestellt haben. Wenn es auf 0PX eingestellt ist, was wird dann passieren? , wie unten gezeigt:
Zu diesem Zeitpunkt können wir die Farben der linken und unteren Ränder so einstellen, dass sie transparent sind oder die gleiche Farbe wie die Hintergrundfarbe, und das Dreieck, das wir wollen, wird herauskommen. Wie in der Abbildung unten gezeigt:
Lassen Sie uns nun den Effekt auf das erste Bild erreichen:
CSS:
.Info {Margin-Top: 50px; Position: Relativ; Breite: 200px; Höhe: 50px; Zeilenhöhe: 60px; Hintergrund:#f6f1b3; Box-Shadow: 1PX 2PX 3PX #E9D985; Rand: 1PX Solid #Dace7c; Border-Radius: 4px; Text-Align: Mitte; Farbe: Rot; } .nav {Position: absolut; links: 30px; Überlauf: versteckt; Breite: 0; Höhe: 0; Randbreit: 10px; Grenzstil: Solid gestrichelte gestrichelte gestrichelte; } .nav-border {top: -20px; Grenzfarbe: transparent transparent #Dace7c transparent; } .nav-background {top: -19px; Grenzfarbe: transparent transparent #f6f1b3 transparent; }HTML:
<div> <span> Eingabeaufforderung </span> <div> </div> <div> </div> </div>
2. CSS3 -Transformation
Wir machen zuerst eine Div -Box mit zwei benachbarten Grenzen mit der gleichen Farbe und den anderen beiden Grenzen mit 0PX. Wie im Bild gezeigt:
Drehen Sie die Schachtel um 45 Grad, um den Dreieck -Eingabeaufenthalt zu erzielen.
CSS:
.Info {Margin-Top: 50px; Position: Relativ; Breite: 200px; Höhe: 50px; Zeilenhöhe: 60px; Hintergrund:#f6f1b3; Box-Shadow: 1PX 2PX 3PX #E9D985; Rand: 1PX Solid #Dace7c; Border-Radius: 4px; Text-Align: Mitte; Farbe: Rot; } .nav {Position: absolut; Top: -8px; links: 30px; Überlauf: versteckt; Breite: 13px; Höhe: 13px; Hintergrund:#f6f1b3; Border-Links: 1PX Solid #Dace7c; Border-Top: 1PX Solid #Dace7c; -Webkit-Transformation: Drehen (45 Grad); -moz-transform: drehen (45 Grad); -O-Transformation: Drehen (45 Grad); Transformation: Drehen (45 Grad); }HTML:
<div> <span> Eingabeaufforderung </span> <div> </div> </div>
3. Sonderzeichen '♦'
'♦' ist ein besonderer Charakter, der einem Charakter entspricht. Daher wird die Größe durch eine Schriftgröße eingestellt, um den Effekt des ersten Bildes zu erreichen:
CSS:
.Info {Margin-Top: 50px; Position: Relativ; Breite: 200px; Höhe: 50px; Zeilenhöhe: 60px; Hintergrund:#f6f1b3; Box-Shadow: 1PX 2PX 3PX #E9D985; Rand: 1PX Solid #Dace7c; Border-Radius: 4px; Text-Align: Mitte; Farbe: Rot; } .nav {Position: absolut; links: 30px; Überlauf: versteckt; Breite: 24px; Höhe: 24px; Schriftart: Normal 24px "Microsoft Yahei"; } .nav-border {top: -17px; Farbe:#Dace7c; } .nav-background {top: -16px; Farbe:#f6f1b3; }HTML:
<div> <span> Eingabeaufforderung </span> <div> ♦ </div> <div> ♦ </div> </div>
Unten ist eine Demo, die mit IE5.5+, Chrom, Firfox und anderen Browsern kompatibel ist. Wenn Sie es verwenden, können Sie die Prüfung direkt in Ihr eigenes Projekt bringen.
<! DocType html> <html> <kopf> <titels Top: 30px; Links: 40px; Schriftgröße: 9pt; Anzeige: Block; Höhe: 100px; Breite: 200px; Hintergrundfarbe: transparent; *Rand: 1PX Solid #666; } s {Position: absolut; Oben: -20px; *Oben: -22px; links: 20px; Anzeige: Block; Höhe: 0; Breite: 0; Schriftgröße: 0; Zeilenhöhe: 0; Grenzfarbe: transparent transparent #666 transparent; Grenzstil: gestrichelte, festgelegte, gestrichelte, gestrichelte gestrichelte; Randbreit: 10px; } i {Position: absolut; Top: -9px; *TOP: -9px; Links: -10px; Anzeige: Block; Höhe: 0; Breite: 0; Schriftgröße: 0; Zeilenhöhe: 0; Grenzfarbe: transparent transparent #FFF transparent; Grenzstil: gestrichelte, festgelegte, gestrichelte, gestrichelte gestrichelte; Randbreit: 10px; } .Content {Border: 1PX Solid #666; -moz-border-radius: 3px; -Webkit-Border-Radius: 3px; Position: absolut; Hintergrundfarbe: #fff; Breite: 100%; Höhe: 100%; Polsterung: 5px; *TOP: -2px; *Border-Top: 1PX Solid #666; *Border-Top: 1PX Solid #666; *Border-Top: 1PX Solid *Border-Links: Keine; *Grenzrechte: Keine; *Höhe: 102px; Box-Shadow: 3px 3px 4px; -moz-box-shadow: 3px 3px 4px; -Webkit-Box-Shadow: 3px 3px 4px; / * Für IE 5.5 - 7 */ filter: progid: dimaTransform.microSoft.Shadow (Stärke = 4, Richtung = 135, Color = '#999999'); / * Für IE 8 */ -ms -filter: "progid: diximagetransform.microSoft.Shadow (Stärke = 4, Richtung = 135, Color = '#999999')"; } </style> </head> <body> <div> <div> <div> Hallo Welt! </div> <s> <i> </i> </s> </div> </body> </html>Reproduktionsbild:
Zusammenfassung:
Die Eingabeaufforderung mit Pfeilen bringt die Benutzerinteraktion mit guten Ergebnissen. In diesem Artikel werden drei Methoden eingeführt. Wenn Sie andere Methoden zu @Me haben, wäre ich sehr dankbar. Ich hoffe, dieser Artikel kann Ihnen helfen.