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

Vue implementiert ein Beispiel für eine verschachtelte Routing-Methode

1. Verschachteltes Routing wird auch als Sub-Rout...

Die JD Vue3-Komponentenbibliothek unterstützt den detaillierten Prozess der Miniprogrammentwicklung

Quellcode-Vorschau: https://github.com/jdf2e/nutu...

Detaillierte Erklärung des Prinzips und der Verwendung des Cursors (DECLARE) in der gespeicherten MySQL-Prozedur

Dieser Artikel veranschaulicht anhand von Beispie...

IE8 bietet eine gute Erfahrung: Aktivitäten

Heute habe ich einen kleinen Vorgeschmack auf IE8...

Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe

Der zu erzielende Effekt In vielen Fällen überwac...

Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch

Dieser Artikel stellt Nginx ausführlich vor, von ...

So erstellen Sie einen SFTP-Server und einen Image-Server auf einem Linux-Cloud-Server

Zunächst können Sie den Unterschied zwischen den ...

Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL

Einzeilige Funktionen vom Datumstyp in MySQL: CUR...

Listen Sie Rendering-Anweisungen für eine effiziente Entwicklung des Vue-Frontends auf

v-for-Richtlinie Wenn wir von Listen sprechen, mü...

Besprechen Sie den Wert von Webstandards aus vier Aspekten mit einer Mindmap

Ich habe einige Werte grob aufgelistet, um die Di...

Zusammenfassung wichtiger Breakpoint-Debugging-Techniken für JavaScript (empfohlen)

Inhaltsverzeichnis Warum einen Debugger verwenden...

Linux löscht automatisch Protokolle und Beispielbefehle von vor n Tagen

1. Befehl zum Löschen von Dateien: Suche das ents...

CSS-Namenskonventionen (Regeln), die es wert sind, gesammelt zu werden Häufig verwendete CSS-Namensregeln

CSS-Benennungskonventionen (Regeln) Häufig verwen...

Beispiele für zwei Möglichkeiten zur Implementierung einer horizontalen Bildlaufleiste

Vorwort: Während der Projektentwicklung stießen w...

Detaillierte Erläuterung der CSS-Randüberlappung und Lösungssuche

Ich habe kürzlich einige CSS-bezogene Wissenspunk...