SVG Teiler Generator
Erstellen Sie sofort SVG-Abschnittsteiler. Wählen Sie Dreieck, Diagonal, Zickzack, Kurve oder Pfeil — kopieren Sie den HTML-Schnipsel und verwenden Sie ihn zwischen Seitenabschnitten.
① Form wählen ② Höhe und Füllfarbe einstellen ③ SVG-HTML kopieren
Füllfarbe
#C9B89A
So funktioniert es
Jeder Teiler ist ein vollbreites SVG mit preserveAspectRatio="none". Die Polygon- oder Pfadkoordinaten sind in einem viewBox definiert, der der Höhe entspricht, sodass die Form jede Containerbreite füllt.
Spiegeloptionen
Vertikal spiegeln dreht die Form mit transform: scaleY(-1) um. Horizontal spiegeln spiegelt sie links-rechts mit scaleX(-1). Beide können für 4 Ausrichtungen pro Form kombiniert werden.
Verwendung
Platzieren Sie das SVG zwischen zwei Abschnitten. Setzen Sie die Füllfarbe auf die Hintergrundfarbe des darunter liegenden Abschnitts. Für vollständige Abdeckung fügen Sie display:block hinzu.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" preserveAspectRatio="none" width="100%" height="80" style="display:block">
<g fill="#c9b89a">
<polygon points="-500,80 720,0 1940,80" />
</g>
</svg>
Was ist ein SVG-Abschnittsteiler?
Ein SVG-Abschnittsteiler ist eine skalierbare Vektorform, die zwischen zwei Seitenabschnitten platziert wird, um einen sanften visuellen Übergang zu schaffen. Gängige Formen umfassen Dreiecke, Diagonalschnitte, Zickzack, Kurven und Pfeile. Da der Teiler in SVG mit preserveAspectRatio="none" definiert ist, dehnt er sich auf jede Containerbreite aus. Diese Technik benötigt keine Bilder.
Häufig gestellte Fragen
Ein SVG-Abschnittsteiler ist eine skalierbare Vektorgrafik zwischen zwei Seitenabschnitten für einen sanften visuellen Übergang. Im Gegensatz zu einem Rahmen verwenden Teiler Formen wie Dreiecke, Kurven oder Zickzack.
Das SVG-Attribut preserveAspectRatio="none" weist den Browser an, den SVG-Inhalt genau auf seine Containerabmessungen zu strecken, wobei das ursprüngliche Seitenverhältnis ignoriert wird.
Ein Kurventeiler verwendet einen glatten kubischen Bezier-Pfad, der an der oberen Mitte des viewBox verankert ist, und erzeugt einen einzelnen sanften Bogen. Ein Wellenteiler verwendet einen sinusförmigen Pfad mit mehreren Spitzen.
Setzen Sie die Füllfarbe in diesem Tool genau auf die background-color des Abschnitts unter dem Teiler.
Ja. Jede Form hat 4 mögliche Ausrichtungen durch die Kombination von vertikalem und horizontalem Spiegeln, also 5 Formen × 4 Ausrichtungen = 20 einzigartige Teiler.
Fügen Sie das SVG-HTML direkt zwischen die zwei section-Tags ein. Stellen Sie sicher, dass das SVG display:block hat.
Ja. Inline-SVG ist Teil des HTML-DOM und erfordert keine HTTP-Anfragen. Suchmaschinen lesen es als HTML.