Html+CSS-Zeichnungsdreiecksymbol

Schauen wir uns zunächst die Renderings an:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!doctype html >
< html lang = "en" >
<Kopf>
< Meta Zeichensatz = "UTF-8" >
<Titel> Dokument </Titel>
< Stil Typ = "Text/CSS" >
#test1 {
Höhe: 20px;
Breite: 20px;
Rahmenfarbe: #FF9600 #3366ff #12ad2a #f0eb7a;
Rahmenstil: durchgezogen;
Rahmenbreite: 20px;
}
#test2 {
Höhe: 0;
Breite: 0;
overflow: hidden; /* Überlauf, Schriftgröße und Zeilenhöhe hier festlegen */
font-size: 0; /*Denn obwohl die Breite und Höhe 0 sind, wird es in IE6 die Standardgröße haben */
Zeilenhöhe: 0; /* Schriftgröße und Zeilenhöhe, wodurch die Box als gestrecktes langes Rechteck erscheint */
Rahmenfarbe: #FF9600 #3366ff #12ad2a #f0eb7a;
Rahmenstil: durchgezogen;
Rahmenbreite: 20px;
}
#test3 {
Höhe: 0;
Breite: 0;
Überlauf: versteckt;
Schriftgröße: 0;
Zeilenhöhe: 0;
Rahmenfarbe: #FF9600 transparent transparent transparent;
Rahmenstil: durchgezogen;
Rahmenbreite: 20px;
}
#test4 {
Höhe: 0;
Breite: 0;
Überlauf: versteckt;
Schriftgröße: 0;
Zeilenhöhe: 0;
Rahmenfarbe: #FF9600 transparent transparent transparent;
Rahmenstil: durchgezogen gestrichelt gestrichelt gestrichelt;
Rahmenbreite: 20px;
}/*Kompatibel mit IE6*/
#test5 {
Höhe: 0;
Breite: 0;
Überlauf: versteckt;
Schriftgröße: 0;
Zeilenhöhe: 0;
Rahmenfarbe: #FF9600 #3366ff transparent transparent;
Rahmenstil: durchgezogen durchgezogen gestrichelt gestrichelt;
Rahmenbreite: 40px 40px 0 0 ;
}
</ Stil >
</ Kopf >
< Textkörper >
< div id = "test1" > </ div > < br >
< div id = "test2" > </ div > < br >
< div id = "test3 " > < / div > <br >
< div id = " test4" > < / div > <br >
< div id = "test5 " > < / div > <br >
</ Körper >
</ html >

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: So lösen Sie das Problem der Randüberlappung

>>: Problem beim Abrufen des Root-Passworts in MySQL 5.7 unter Linux (getestet und verfügbar)