Zeichnen von Dreiecken (verschiedene Winkel) mit reinem CSS_Basic-Tutorial

Unsere Webseiten haben aufgrund von CSS ständig wechselnde Stile. Diese scheinbar einfache Stilsprache ist sehr flexibel einsetzbar. Solange Sie Ihrer Kreativität freien Lauf lassen, können Sie noch viele weitere unvorstellbare Effekte erzielen. Insbesondere mit der weit verbreiteten Verwendung von CSS3 sind immer mehr neuartige CSS-Werke entstanden.

Heute stelle ich Ihnen die CSS-Methode zum Zeichnen von Dreiecken vor

Kopieren Sie den Code Die Der Code lautet wie folgt:

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right : 50 Pixel durchgehend transparent;
Rand unten: 100 Pixel durchgehend rot;
}

Code kopieren Der Code lautet wie folgt:

#triangle- unten {
Breite: 0;
Höhe: 0;
Rand links: 50 Pixel durchgehend transparent;
Rand rechts: 50 Pixel durchgehend transparent;
Rand oben: 100 Pixel durchgehend rot;
}

Code kopieren Der Code lautet wie folgt:

#triangle- links {
Breite: 0;
Höhe: 0;
Rand oben: 50 Pixel durchgehend transparent;
Rand rechts: 100 Pixel durchgehend rot;
Rand unten: 50 Pixel durchgehend transparent;
}

Code kopieren Der Code lautet wie folgt:

#triangle- rechts {
Breite: 0;
Höhe: 0;
Rand oben: 50 Pixel durchgehend transparent;
Rand links: 100 Pixel durchgehend rot;
Rand unten: 50 Pixel durchgehend transparent;
}

Code kopieren Der Code lautet wie folgt:

#triangle- oben links {
Breite: 0;
Höhe: 0;
Rand oben: 100 Pixel durchgehend rot;
Rand rechts: 100 Pixel durchgehend transparent;
}

Code kopieren Der Code lautet wie folgt:

#triangle- oben rechts {
Breite: 0;
Höhe: 0;
Rand oben: 100 Pixel durchgehend rot;
Rand links: 100 Pixel durchgehend transparent; >

Code kopieren

Der Code lautet wie folgt:#triangle- unten links { Breite: 0;

Höhe: 0;

Rand unten: 100 Pixel durchgehend rot;
Rand rechts: 100 Pixel durchgehend transparent;
}

Code kopieren

Der Code lautet wie folgt:

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100 px durchgehend rot;
    border-left: 100 px durchgehend transparent;
}