Wie bekomme ich div als Flagge mit CSS?

8

Ich möchte auf einigen meiner Elemente auf einer Website ein Label hinzufügen und ein Label erstellen, bei dem es sich um eine Flagge handelt, die unten einen umgekehrten V-förmigen Ausschnitt hat.

Bisher habe ich das:

HTML

%Vor%

CSS

%Vor%

Ссылка

Allerdings muss der Hintergrund weiß sein und um diese Form herum in Lila und 1px umranden. Ich habe versucht, die gleiche Form nur in Weiß in diesem zu passen, aber alles wurde unordentlich und ging nicht wie erwartet.

Vielleicht ist es ein falscher Ansatz, aber ich möchte mit Etiketten enden, die in etwa so aussehen:

    
Mindaugas Jačionis 08.03.2015, 21:25
quelle

6 Antworten

7

Hier ist eine etwas andere Methode, die Pseudo-Elemente und transformiere Rotationen, um ein skizziertes Banner wie folgt zu erstellen:

  • Diese gewinkelte Form wird mit position: absolute pseudo-elements, :before und :after :
    • erstellt

  • Der Überschuss wird mit overflow: hidden auf dem Elternteil abgeschnitten, um unser Banner zu bilden:

  • Der Umriss wird mit box-shadow erstellt, und die beiden Winkel werden durch Ziehen / Drücken der x-Achse um 46px nicht überlappt - box-shadow: 46px 0 0 3px #000

Vollständiges Beispiel

%Vor% %Vor%
    
misterManSam 09.03.2015, 00:34
quelle
10

Mit CSS:

Sie können CSS-Transformationen für Pseudoelemente verwenden, um den Hintergrund mit einem < stark> transparentes umgekehrtes Dreieck unten:

%Vor% %Vor%

Beachten Sie, dass Sie in den Eigenschaften transform und transform-origin Vendorenpräfixe hinzufügen müssen, um die Browserunterstützung zu maximieren. Weitere Informationen finden Sie unter canIuse .

Mit SVG

Ein anderer Ansatz besteht darin, ein Inline-SVG mit dem Polygon-Element zu verwenden:

%Vor% %Vor%
    
web-tiki 19.11.2015 11:31
quelle
3

STOLEN VON CSS-SHAPES

%Vor%

DEMO:

%Vor% %Vor%

Mein Ansatz

Mein Ansatz verwendet verzerrte Elemente und ermöglicht Ihnen, diese schnell an Ihre Bedürfnisse anzupassen.

%Vor% %Vor%
    
jbutler483 09.03.2015 00:05
quelle
2

Ich habe versucht, CSS zu aktualisieren, um den gewünschten Effekt zu erzielen:

%Vor% %Vor%

Geige: Ссылка

    
Leo Farmer 08.03.2015 21:54
quelle
1

Hier ist, was ich herausgefunden habe.

Link-Fiddle

Es entspricht dem, wonach Sie gesucht haben, aber ich denke, es sollte einen "besseren Weg" geben, als mit der Grenze zu spielen.

HTML

%Vor%

CSS

%Vor%     
Arnaud Bertrand 08.03.2015 21:52
quelle
1

Eine schnelle Abhilfe besteht darin, sie zu drehen:

%Vor%

Geige

Eine andere Lösung wäre ein SVG-Pfad, hier ist eine Geige! .

    
maioman 08.03.2015 21:35
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Kann eine Schnittstelle beliebige Instanzvariablen enthalten?