Das ist mein CSS-Dreieck. Wenn der übergeordnete Container - mit einer Einstellung für die Höhe des Prozentwerts - in der Größe geändert wird, sollte sich auch die Größe des Dreiecks ändern.
Wie muss die folgende Definition ändern, dass dies funktionieren könnte?
Wenn es nicht mit allgemeinem CSS funktioniert, bin ich auch offen für CSS3.
%Vor%AKTUALISIEREN
Das ist Teil meines Layouts:
%Vor%Sie müssen die Art ändern, wie Sie das Dreieck erzeugen, da Herr Alien sagt, dass der Rand nicht flüssig ist.
Das CSS wäre:
%Vor%Sie legen die Dreiecksdimension auf den Prozentsatz des Elternteils fest, der am besten zu Ihnen passt, und dann erstellen Sie die Diagonale des Dreiecks in Schwarz.
Demo geändert, damit die Basiselemente reagieren:
Neue Demo zum Einbinden Ihres HTML.
Ich habe CSS auf ein Minimum reduziert, um es zum Laufen zu bringen: 100% Höhe zu body & amp; html, Breite zum Wrapper hinzugefügt. Ansonsten ist es dein Layout, also sollte das funktionieren.
Meine Lösung:
Ссылка < br>
Beschreibung:
Ich brauchte Pfeile, um aktive Menüelemente der Seitenleiste zu markieren.
Wenn ich mehrzeiligen Text in ihnen hatte, war der Pfeil gebrochen
Also mu Lösung ist:
Verwenden Sie : nach und : vor Elementen mit linear-gradient , um gestreckte Pfeile mit derselben Breite bereitzustellen:
Code:
Danke @vals für die Idee.
Diese Geige implementiert responsive CSS-Dreiecke mit nur CSS und einem Element. Es zeigt nach oben, unten, links und rechts zeigenden Dreiecke und Ihr ist oben links zeigend. Das reagierende nach unten weisende Dreieck kann leicht geändert werden, um es zu erreichen:
%Vor%Die Erklärung zu der Logik, die für das reaktionsfähige Dreieck verwendet wird, finden Sie in meinem Artikel Pure CSS reaktionsfähige Dreiecke .
Nicht-Gradienten-Lösung, um gezackte Zeilen zu vermeiden ( Fiddle )
Ich war auf der Suche nach etwas genau wie @Serg Hospodarets Antwort, aber ich erkannte, dass Gradient eine gezackte Linie, wahrscheinlich ein Rendering-Problem des Browsers erstellt. Nach einigem Suchen und Fiedeln habe ich das gemacht.
Zusammenfassung: Ich habe eine Spacer-Technik verwendet hier von Johan Rönnblom, um die Breite relativ zur Höhe im Verhältnis 1: 1 zu berechnen, dann füge ich zwei Boxen am Rand von div hinzu, die 50% der Höhe und Breite des Elternelements haben Wie bei der 50% -Erzeugung, die perfekte Quadrate erzeugt, rotiere ich das Unterelement um 45 Grad, um diagonale Schnitte zu erzeugen.
Unten ist der vollständige Code:
HTML
%Vor%SCSS:
%Vor%