Detaillierte Erklärung mehrerer Möglichkeiten zum Erstellen eines oberen linken Dreiecks in CSS

Heute stellen wir mehrere Möglichkeiten vor, mit CSS ein Dreieck oben links zu schreiben.

Schematische Darstellung (am Beispiel einer Breite und Höhe von 60 Pixeln):

Diese Art von Dreieck kann im Allgemeinen als unterer linker Fuß von Grafiken vom Typ „Dialogfeld“ verwendet werden.

Der Erste:

#Dreieck-obenlinks {
  Rand: 30px durchgezogen #e6686e;
  Höhe: 0;
  Breite: 0;
  Rahmenfarbe rechts: transparent;
  Farbe des unteren Rahmens: transparent;
}

Zweiter Typ:

#Dreieck-obenlinks {
  Breite: 0;
  Höhe: 0;
  Rahmen oben: 60px durchgezogen #e6686e;
  Rahmen rechts: 60px durchgehend transparent;
}

Der dritte Typ:

#Dreieck-obenlinks {
  Rand: 60px durchgehend transparent;
  Breite: 0;
  Höhe: 0;
  Rahmenfarbe links: #e6686e;
  Obere Rahmenbreite: 0;
}

Sie können mehrere verschiedene Dreiecksmethoden und Dreiecke in verschiedenen Richtungen ausprobieren.

Hier ist eine sehr empfehlenswerte Website, die häufig verwendete CSS-Grafiken zeigt: https://css-tricks.com/the-shapes-of-css/

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.