Wie kann ich ein Dreieck in HTML?

Will ich mit basic-CSS zu machen Dreieck auf einer HTML-Seite. Ich bin mit Dreieck pics die Zeit nehmen, um zu laden, so, ich will abnehmen Ladezeit meiner Seite.

Um zu verstehen, wie diese Form funktioniert, und um alternative Lösungen zu finden stackoverflow.com/q/7073484/1811992

InformationsquelleAutor Ali | 2012-09-18

  1. 30

    Nicht möglich, mit HTML, sondern mit CSS. Beispiel:

    <div class="triangle></div>
    .triangle {
    width: 0;
    height: 0;
    border: solid 30px;
    border-color: transparent transparent black transparent;
}

    Live-demo: jsFiddle

    • 30px im border Eigenschaft definiert die Größe: Breite und Höhe. Sie können es ändern, wenn Sie möchten, eine kleinere oder eine größere Dreieck.
    • wenn Sie möchten, drehen Sie das Dreieck, wechseln Sie die position der black und transparent im border-color Eigenschaft. Sehen jsFiddle
    Beachten Sie, dass durch das verlassen zwei die Grenzen auf, Sie richtig zu Dreiecken statt, die es Ihnen ermöglichen, die zur Erstellung eines Dreiecks, die Sie benötigen. Siehe meine Antwort und jsfiddle.net/GR4Kj/5 uselesspickles.com/triangles

    InformationsquelleAutor Nikola K.

  2. 3

    Den trick, der hinter macht ein css-Dreieck ist

    1. Erstellen Sie eine leere div
    2. Seine Höhe und Breite 0.
    3. Geben 2 gegenüberliegenden Seiten derselben border-width und transparent zu machen.
    4. Geben, der Dritte, den gleichen border-width, geben Sie ihm eine solide Farbe.

    Hoffe, das hilft.

    Überprüfen Sie diese jsFiddle

    Funktioniert nicht. Es sei denn, Sie verpasste einen Schritt in Ihrer Erklärung. JSFiddle.
    Dank dem neuesten Stand !!! Bitte aktualisieren Sie, wenn Sie kann es erklären, oder haben eine andere Idee/trick, um die gleichen.

    InformationsquelleAutor

  3. 2

    Dadurch wird ein Dreieck

    <svg width="100" height="100">
    <polygon points="50, 50, 100, 100, 0, 100" fill="yellow" />
</svg>

    InformationsquelleAutor Jak

Schreibe einen Kommentar