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

nginx Konfigurationsort Zusammenfassungsort Regelmäßiges Schreiben und Umschreiben von Regeln

1. Regulärer Ausdruck für den Standort Schauen wi...

Lösen Sie das Problem, dass der Standardwert des CSS3-Übergangsverzögerungsattributs 0 ohne Einheit ist und ungültig ist

Heute möchte ich mit Ihnen teilen, dass der Stand...

Lösen Sie das Problem, dass Zeilenhöhe = Elementhöhe, der Text aber nicht vertikal zentriert ist

Lassen Sie mich zunächst erklären, warum der Text...

Führen Sie die folgenden Schritte aus, um mit Nginx in Kombination mit Keepalived eine hohe Verfügbarkeit zu erreichen.

Vorwort Um die Hochverfügbarkeit des Systems zu g...

Verbesserung der Wirkung von Hyperlinks im Webdesign und in der Produktion

Hyperlinks ermöglichen es Benutzern, sofort von ei...

Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker

Text 1) Laden Sie das Ubuntu-Image herunter Docke...

So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst

Konfigurieren Sie die Webseitenkomprimierung, um ...

Docker führt Vorgänge mit dem angegebenen Speicher aus

wie folgt: -m, --memory Speicherlimit, das Format...

Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt

Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...

CSS3 + HTML5 + JS realisiert den Schrumpf- und Expansionsanimationseffekt eines Blocks

Als ich kürzlich an einem Projekt arbeitete, stel...

Detailliertes Tutorial zum PyCharm- und SSH-Remote-Access-Server-Docker

Hintergrund: Einige Experimente müssen auf dem Se...

Vue3+Vite+TS implementiert sekundäre Kapselung von Element-Plus-Geschäftskomponenten sfasga

Inhaltsverzeichnis 1. Strukturzeichenfolge 2. Tup...

Sequentielles und zufälliges Schreiben auf Linux-Festplatten

1. Einleitung ● Zufälliges Schreiben führt dazu, ...

Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen

CSS3-Hintergrundbild bezogen Kompatibilität: IE9+...

Detaillierte Erläuterung der Persistenz des Vue-Seitenstatus

Inhaltsverzeichnis Code: Auffüllen: Zusammenfasse...