Wie erstellt man Alligator (oder Sägezahn) Rahmen mit CSS oder SVG?
Alligator ist möglicherweise nicht das richtige Wort; Ich begrüße eine Korrektur des Titels.
Ich möchte, dass der Container Alligator wie in der Abbildung unten hat.
Wenn das fragliche Element einen festen Hintergrund hatte, dann könnte Pseudo-Element-Trickery oder CSS3 border-image verwendet werden. In diesem Fall ist der Inhalt des Containers jedoch ein sich nicht wiederholendes Muster.
Alternativ ist es möglich, dass das Bild selbst die Grenze hat. Aufgrund der Art und Weise, wie sich das Bild ausdehnt (Animation, um das Bild sichtbar zu machen), ist das nicht möglich.
Die einzige Alternative, die ich denken kann, ist SVG.
6 Antworten
Abhängig von Ihren Anforderungen für die Rückwärtskompatibilität ist möglicherweise die Eigenschaft CSS3 border-image geeignet.
Siehe: Ссылка
Sie arbeiten in den neuesten Versionen aller Browser: Ссылка
Zum Schluss noch ein Tool zum Spielen mit ihnen: Ссылка
Aktualisierung:
Solange der Hintergrund hinter dem Bild einen durchgehenden Hintergrund hat, kann border-image funktionieren.
Fügen Sie einfach eine innere <div> mit dem Sägezahnrand ein.
HTML
%Vor%CSS
%Vor%Sie können dies in SVG mit einer Maske, einem Clip-Pfad oder einem Filter tun. Hier ist ein Beispiel, das einen Clip-Pfad mit relativer Größe verwendet, so dass es bei Inhalten beliebiger Größe funktioniert.
Dies funktioniert über den Browser (IE9 +): Ссылка
Man kann maske-box-image in webkit-Browsern verwenden, was ähnlich wie border-image wie folgt funktioniert:
Wenden Sie dies auf Ihr gewünschtes Element an (siehe Syntax ):
%Vor%Beispiel SVG (könnte kleiner sein):
%Vor%Das Folgende funktioniert auch für Firefox mit dem mitgelieferten SVG:
%Vor%Beachten Sie jedoch, dass der Maskenpfad in relative Werte (0 bis 1) konvertiert werden muss und dass die Maske "maskUnits=" objectBoundingBox "maskContentUnits=" objectBoundingBox "" gesetzt sein muss. In meinem Beispiel habe ich alle Werte im Pfad mit 500 geteilt, was der ursprünglichen Breite des Pfads entspricht. Es skaliert ein bisschen und sieht nicht so gut aus wie das Webkit-Bit, funktioniert aber gut genug.
Hier ist eine weitere, obwohl unvollkommene Lösung.
HTML
%Vor%CSS
%Vor%Der Nachteil dieser Lösung ist, dass Sie die Elementhöhe kennen müssen, wenn es sich um eine untere Grenze handelt. In Kombination mit JavaScript (um Elementdimensionen zu berechnen und CSS zu aktualisieren) funktioniert das.
Dies ist ein alter Thread, aber wenn jemand anders einen Zickzack-Rahmen benutzen muss, habe ich einen sass Mix für ihn gemacht.
%Vor%Arbeitsbeispiel: Ссылка
Hier ist eine mögliche Lösung. Verwenden Sie ein rautenförmiges PNG und legen Sie es als mehrere Hintergründe innerhalb des Containers fest. Sie müssen eine Möglichkeit finden, den Diamanten so zu skalieren, dass er die Kanten richtig ausfüllt (Vielleicht SASS verwenden?).
Stellen Sie den Diamanten so ein, dass er sich entlang der Kanten wiederholt.
Hier ist ein kurzes Beispiel: Ссылка
Und hier ist der SASS-Code dafür. Der #container ist nur ein DIV:
Falls Sie mit der Funktionsweise mehrerer Hintergründe nicht vertraut sind; Sie trennen die Parameter durch ein Komma. Dies ist am einfachsten, wenn Sie die Eigenschaft background shorthand verwenden. Im Falle der background-size -Eigenschaft gibt es keinen Platz in der Kurzschrift für diese Werte, also müssen wir nur sicherstellen, dass wir auch die mehreren Werte getrennt durch Kommas eingeben und sicherstellen, dass sie in der gleichen Reihenfolge wie die Kurzschrift sind Eigenschaften.