Komplizierter Clip-Pfad / SVG-Hintergrund eines Elements
Ich muss etwas wie das Bild unten erstellen:
Wo:
- Der schwarze Hintergrund repräsentiert ein Element auf der Seite,
headerzum Beispiel - Der cyanfarbene Hintergrund repräsentiert den gesamten Hintergrund unter dem schwarzen Hintergrund
- das schwarze Hintergrundelement muss wie ein einzelnes Element behandelt werden, da es oben eine Musterüberlagerung hat, die innerhalb der Grenzen des schwarzen Elements bleiben muss und nicht außerhalb davon erscheint
Es wäre sehr einfach, einfach das schwarze Element mit :pseudo-elements zu erstellen, aber dieses Muster darüber hat das Ganze zum Stillstand gebracht.
Ich habe über clip-path prop gelesen. aber ich bin mir nicht sicher, ob ich in der Lage wäre, einen komplexen Clip wie diesen zu erstellen (oder vielleicht scheint es mir komplex zu sein).
Das Ganze wird in einer iOS-App verwendet, und bisher scheint diese Clip-Pfad-Eigenschaft damit kompatibel zu sein.
Eine andere Sache zu erwähnen, das schwarze Element wird eine feste Höhe haben, aber muss 100% Breite des übergeordneten Elements sein.
Ich habe mir gedacht, dass ich stattdessen mit svg durchkommen würde, aber da es eine feste Höhe sein muss, scheint es, als würde es verzerren, wenn es gestreckt ist.
UPDATE:
Die rechte Seite muss die gleiche Breite haben. Ich habe mir gedacht, dass ich vielleicht zwei SVGs in einem <g> -Tag verwenden und sie absolut positionieren könnte, eine wäre flüssig und die andere hätte eine feste Breite. Ich bin mir jedoch nicht sicher, ob eine filter beide abdeckt, oder ob die filter überhaupt auf ein <g> -Tag in einer svg
SVG Beispiel unten:
Irgendwelche Tipps oder Hinweise werden sehr geschätzt!
2 Antworten
Vielleicht wäre es eine bessere Lösung mit Maskierung gehen?
Ein Ansatz mit fester Breite
Ersetzen Sie die Abmessungen der Breite der Rahmen durch einen festen Wert in Pixel. Verwenden Sie calc für das innere Rechteck.
Ein elliptisches Beispiel
Dies kann erreicht werden, indem Sie den von Ana in diesem CSS beschriebenen Ansatz verwenden Tricks Artikel .
Verwenden von CSS-Clippfad:
Alles was wir tun müssen, ist ein polygon für das Clipping wie im folgenden Snippet zu verwenden und es auf den Container anzuwenden. Ein solcher Pfad würde das Hintergrundbild in der Lücke zwischen der äußersten Box und der mittleren Box anzeigen, das Hintergrundbild zwischen der mittleren Box und der innersten Box ausblenden oder abschneiden.
Verwenden von SVG Clip-path:
SVG clip-path bietet eine bessere Browser-Unterstützung als die CSS-Version, da es auch von Firefox unterstützt wird. Alles, was wir tun müssen, ist ein path wie im folgenden Snippet zu erstellen und es zum Abschneiden des Containers zu verwenden.
Die SVG-Implementierung wäre viel einfacher gewesen, wenn die Abmessungen Ihres Containers statisch wären. Da sie nicht statisch sind, können Bruchzahlen nicht verwendet werden, da der Wert basierend auf der tatsächlichen Breite des Elements abweichen würde (was auch immer 100% entspricht). Angenommen, ein Bruchwert von 0,2 würde 40 Pixel für ein 200 Pixel breites Element bedeuten und würde 80 Pixel für ein 400 Pixel breites Element bedeuten. Sie können sehen, wie sich dies auf die Ausgabe im ersten Beispiel des Snippets auswirkt.
Eine Möglichkeit, dies zu umgehen, wäre die Verwendung von JavaScript (oder einer anderen Skriptbibliothek, die Sie bevorzugen), die tatsächliche berechnete Breite des Elements in Pixeln und die Berechnung der Koordinaten des d -Attributs des Pfads darauf. Das zweite Beispiel im folgenden Snippet verwendet diese Methode.
Hinweis: Clip-Pfad wird nicht von IE unterstützt, aber da Sie eine iOS-App erstellen, sollte dies meiner Meinung nach kein großes Problem darstellen.
Tags und Links css svg css3 css-shapes