Html+CSS-Zeichnungsdreiecksymbol

Html+CSS-Zeichnungsdreiecksymbol

Schauen wir uns zunächst die Renderings an:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!doctype html >   
  2. < html   lang = "en" >   
  3. <Kopf>​​   
  4.      < Meta   Zeichensatz = "UTF-8" >   
  5.      <Titel> Dokument </Titel>​​​​   
  6.      < Stil   Typ = "Text/CSS" >   
  7. #test1 {
  8. Höhe: 20px;
  9. Breite: 20px;
  10. Rahmenfarbe: #FF9600 #3366ff #12ad2a #f0eb7a;
  11. Rahmenstil: durchgezogen;
  12. Rahmenbreite: 20px;
  13. }
  14. #test2 {
  15. Höhe: 0;
  16. Breite: 0;
  17. overflow: hidden; /* Überlauf, Schriftgröße und Zeilenhöhe hier festlegen */
  18. font-size: 0; /*Denn obwohl die Breite und Höhe 0 sind, wird es in IE6 die Standardgröße haben */
  19. Zeilenhöhe: 0; /* Schriftgröße und Zeilenhöhe, wodurch die Box als gestrecktes langes Rechteck erscheint */
  20. Rahmenfarbe: #FF9600 #3366ff #12ad2a #f0eb7a;
  21. Rahmenstil: durchgezogen;
  22. Rahmenbreite: 20px;
  23. }
  24. #test3 {
  25. Höhe: 0;
  26. Breite: 0;
  27. Überlauf: versteckt;
  28. Schriftgröße: 0;
  29. Zeilenhöhe: 0;
  30. Rahmenfarbe: #FF9600 transparent transparent transparent;
  31. Rahmenstil: durchgezogen;
  32. Rahmenbreite: 20px;
  33. }
  34. #test4 {
  35. Höhe: 0;
  36. Breite: 0;
  37. Überlauf: versteckt;
  38. Schriftgröße: 0;
  39. Zeilenhöhe: 0;
  40. Rahmenfarbe: #FF9600 transparent transparent transparent;
  41. Rahmenstil: durchgezogen gestrichelt gestrichelt gestrichelt;
  42. Rahmenbreite: 20px;
  43. }/*Kompatibel mit IE6*/
  44. #test5 {
  45. Höhe: 0;
  46. Breite: 0;
  47. Überlauf: versteckt;
  48. Schriftgröße: 0;
  49. Zeilenhöhe: 0;
  50. Rahmenfarbe: #FF9600 #3366ff transparent transparent;
  51. Rahmenstil: durchgezogen durchgezogen gestrichelt gestrichelt;
  52. Rahmenbreite: 40px 40px 0 0 ;
  53. }
  54.      </ Stil >   
  55. </ Kopf >   
  56. < Textkörper >   
  57.      < div   id = "test1" > </ div > < br >   
  58.      < div   id = "test2" > </ div > < br >   
  59.      < div   id = "test3 " > < / div > <br >   
  60.      < div   id = " test4" > < / div > <br >   
  61.      < div   id = "test5 " > < / div > <br >   
  62. </ Körper >   
  63. </ html >   
  64.   

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)

Artikel empfehlen

Lösung für das Problem, dass auf der utf8-kodierten Seite unter IE eine Zeile ohne Grund leer bleibt und die utf8-Seite nicht angezeigt werden kann

Der Grund dafür ist, dass alle Dateien in UTF8 kod...

Implementierung der MySQL8.0.11-Datenverzeichnismigration

Das Standardspeicherverzeichnis von MySQL ist /va...

Detaillierte Erläuterung der Konfiguration und Optimierung des statischen Nginx-Dateidienstes

Stammverzeichnis und Indexdatei Die Root-Direktiv...

So importieren Sie chinesische Daten in Navicat für SQLite in CSV

In diesem Artikel erfahren Sie zu Ihrer Informati...

Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen

1. Mehrere Aufrufe eines einzelnen Pfeils Sobald ...

So bereinigen Sie regelmäßig private Docker-Server-Images

Die Verwendung von CI zum Erstellen von Docker-Im...

Backup zwischen MySQL-Datenbank und Oracle-Datenbank importieren

Importieren Sie die aus der Oracle-Datenbank expo...

Das Prinzip und die Anwendung der ES6-Dekonstruktionszuweisung

Inhaltsverzeichnis Array-Destrukturierungszuweisu...

Umfassende Website-Bewertungslösung

<br />Manchmal werden Ihnen möglicherweise F...

jQuery implementiert den Fall der Schriftgrößenanpassung

In diesem Artikel wird der spezifische Code von j...

Einige Kenntnisse über die absolute und relative Positionierung von Seitenelementen

Ab heute werde ich regelmäßig kleine Wissenspunkte...

Detaillierte Schritte zum Einrichten eines Nexus-Servers

1. Die Bedeutung des Aufbaus eines Nexus-Dienstes...

So verwenden Sie Shell-Skripte in Node

Hintergrund Während der Entwicklung benötigen wir...

SQL-Skriptfunktion zum Schreiben einer PostgreSQL-Datenbank zur Implementierung der Analyse

In diesem Artikel wird hauptsächlich die SQL-Skri...

Führen Sie die Schritte zum Erstellen einer Laravel-Entwicklungsumgebung mit Docker aus

Vorwort In diesem Artikel verwenden wir Docker, u...