Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Um mit CSS3 ein Dreieck zu zeichnen, können Sie dazu die Eigenschaften „Rahmen“ und „Transparenter Rahmen“ des Elements verwenden. Hier ist ein einfacher Beispielcode:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明，控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明，控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色，控制三角形的底边 */
}

In diesem Beispiel erstellen wir ein Element mit einer Breite von 0 und einer Höhe von 0 und legen drei Ränder fest, um die linke Hypotenuse, die rechte Hypotenuse und die Basis des Dreiecks zu steuern. Durch Anpassen der Breite und Farbe des Rahmens können Sie verschiedene Dreiecksstile zeichnen.

Sie können den obigen Code beispielsweise auf ein HTML-Element anwenden:

 <div class="triangle"></div>

Dadurch wird ein Dreieck auf der Seite angezeigt.