Erforderliche Fünfeckform mit CSS und HTML in der richtigen Richtung

8

Wie mache ich diese Art von Pentagone ohne -webkit-clip-path , weil es nicht die meisten Browser wie Firefox, IE9 funktioniert.

Mein Code: Ссылка

%Vor% %Vor%
    
Query Master 01.01.2015, 10:43
quelle

4 Antworten

6

Sie könnten direkt svg verwenden.

%Vor%

Sie könnten svg s clipPath und foreignObject verwenden, um das Element div in svg zu importieren und inline clipPath für browserübergreifende Unterstützung anzuwenden.

Browserunterstützung für diesen Ansatz

%Vor% %Vor%

Ein Bild anstelle einer Volltonfarbe verwenden.

%Vor%

Alternativ können Sie ein Dreieck auf :after : pseudo-element verwenden.

%Vor% %Vor%

Hinzufügen eines Bildes anstelle einer Volltonfarbe mit CSS.

%Vor% %Vor%
    
chipChocolate.py 01.01.2015, 10:47
quelle
5

AKTUALISIEREN

Sie können currentcolor verwenden, um das Hintergrundbild zu hacken.

%Vor% %Vor%

Sie können Pseudo-Elemente - CSS

verwenden

%Vor% %Vor%

Sie können die Kompatibilitätstabellen für die Unterstützung von HTML5, CSS3, SVG und anderen Technologien in verschiedenen Browsern auf caniuse.com

    
Gildas.Tambo 01.01.2015 10:50
quelle
2

%Vor%
    
madforstrength 01.01.2015 10:52
quelle
1

Sie können diesen Ansatz verwenden:

  • Drehen Sie das Hauptelement um 45 Grad. Fügen Sie overflow: hidden; hinzu.
  • Fügen Sie ein Pseudo-Element hinzu und wandeln Sie es um. Positionieren Sie es korrekt innerhalb des Hauptelements.

Bewegen Sie den Mauszeiger über das Bild, um zu sehen, wie dies funktioniert:

FIDDLE und Snippet :

%Vor% %Vor%

Ausgabe:

    
The Pragmatick 18.02.2015 17:04
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Nexus 6 und Nexus 9 Bildschirmdichte