Erzeugt ein css-Dreieck / einen Pfeil, wenn die Größe des Elternteils geändert wird

7

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%     
Elisabeth 30.07.2013, 06:17
quelle

4 Antworten

13

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%

Demo

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:

demo2

Neue Demo zum Einbinden Ihres HTML.

demo3

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.

    
vals 30.07.2013, 08:49
quelle
11

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:

%Vor%

Danke @vals für die Idee.

    
Serg Hospodarets 01.08.2014 15:50
quelle
6

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 .

    
JoseV 10.09.2013 18:10
quelle
0

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%     
Imran Bughio 27.03.2018 09:09
quelle

Tags und Links