CSS-Dreiecke werden abgeschnitten

8

Ich versuche, einige CSS-Dreiecke zu erstellen, indem ich css und die Pseudoklasse pseudo verwende. Irgendwie funktionieren die Pfeile nach oben und unten richtig, aber die Pfeile links und rechts werden "abgeschnitten" (siehe fiddle: Ссылка )

Dies ist im Grunde die CSS, die ich verwende:

%Vor%

Weiß jemand, warum das passiert?

    
Leon 21.03.2014, 10:23
quelle

4 Antworten

10

Machen Sie das :after Pseudoelement inline-block (oder block ). Derzeit ist es ein Inline-Element und seine Größe basiert auf der Zeilenhöhe des (leeren) Textes, den es enthält.

Sie müssen dann aber eine Positionierung korrigieren, aber das sollte trivial sein.

Ссылка

Übrigens müssen Sie möglicherweise :after überhaupt nicht verwenden, aber das hängt davon ab, ob Sie möchten, dass das div einen Pfeil hat oder ein sein soll Pfeil. Das liegt an dir. ;)

    
GolezTrol 21.03.2014, 10:32
quelle
3

Fügen Sie einfach display: block zu all Ihren :after Selektoren hinzu. Zum Beispiel

%Vor%

Hier ist eine Demo

    
Pattle 21.03.2014 10:34
quelle
1

Stellen Sie sicher, dass das: after-Pseudo-Element je nach Verwendungsszenario entweder als block oder inline-block angegeben wird.

%Vor%

Siehe Ссылка

    
michaelward82 21.03.2014 10:33
quelle
1

Ihr Pseudo-Element muss Layout ausgelöst werden: Sie können als display:block; oder einen anderen Wert für display, aber inline festlegen. Sie können auch float oder position:absolute / fixed verwenden, um das Layout auszulösen. Ссылка

%Vor%     
G-Cyr 21.03.2014 10:38
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset LibGDX HelloWorld-Projekt stürzt ab, wenn es auf einem Android-Emulator ausgeführt wird