Detaillierte Erläuterung der Techniken zum Zeichnen dreieckiger Pfeilmuster mithilfe von CSS

Ich möchte diese Website kürzlich ändern und ein Eingabeaufforderungsfeld darin einfügen. Das ist ganz einfach, aber ich möchte, dass der Tooltip einen dreieckigen Pfeil hat. Allerdings ist es fast eine Katastrophe, wenn ich daran denke, dass ich Bilder verwenden und unzählige Pfeile in verschiedenen Farben und Richtungen vorbereiten muss. Glücklicherweise erzählte mir Darren Waddell, der Hauptentwickler von MooTools, von einer großartigen Technik: dem Zeichnen dreieckiger Pfeile mit CSS. Mit reinem CSS benötigen Sie nur sehr wenig Code, um dreieckige Pfeile zu erstellen, die mit verschiedenen Browsern kompatibel sind!

CSS-Code

/* 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;   
}

Der Schlüssel zum Zeichnen dieser Dreiecke liegt darin, dass die beiden Seiten des Dreiecks zeigen sollen in Richtung An den Seiten befinden sich sehr dicke Ränder. Die vom Pfeil abgewandte Seite hat ebenfalls den gleichen dicken Rand und die Farbe dieser Seite entspricht der Farbe Ihres Dreiecks. Je dicker der Rand, desto größer das Dreieck. Auf diese Weise können Sie Pfeile in verschiedenen Farben, Größen und Ausrichtungen zeichnen. Das Beste daran ist, dass Sie nur wenige Zeilen CSS-Code benötigen, um diesen Effekt zu erzielen.

Verwenden Sie :before und :after, um CSS-Dreiecke zu zeichnen

Das obige CSS-Beispiel verwendet ein echtes Seitenelement zum Zeichnen, aber manchmal hat das reale Element auch Es wird verwendet , aber Sie können es nicht direkt bedienen. Was soll ich tun? Reine CSS-Dreiecke können tatsächlich mithilfe von Pseudoelementen gezeichnet werden. So zeichnen Sie es:

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;   
}

Die Farbe des Randes auf der vom Pfeil abgewandten Seite ist die Farbe des Dreieckspfeils. Sie müssen nicht beide :before- und :after-Pseudoelemente verwenden, um diesen Pfeil zu zeichnen – eines reicht aus. Und das andere können Sie als Hintergrundschatten oder Hintergrundkante für das vorherige verwenden.

Ich hätte schon früher von dieser Technologie wissen müssen! Ich glaube, dass diese einfache und problemlose Technologie in Zukunft bei der Verbesserung der Benutzeroberfläche nützlich sein wird.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Techniken zum Zeichnen dreieckiger Pfeilmuster mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!