SVG / Sekcije

SVG razdelnik oblika: ivice i slojevi sekcija

Generišite osam SVG oblika za razdvajanje sekcija uz podešavanje amplitude, frekvencije, visine, okretanja, obrnutog ispune i do tri sloja. Pregledajte sekciju i kopirajte SVG, CSS i HTML.

SVG razdelnik oblika: ivice i slojevi sekcija: Izaberite talasastu, zakrivljenu, nagnutu, trouglastu, streličastu, cik-cak, oblačnu ili planinsku ivicu, podesite njenu visinu, amplitudu i ponavljanja, okrenite je ili obrnite i naslažite do tri sloja. Razdelnik se prilagođava širini svake stranice; kopirajte SVG, CSS za pozicioniranje ili gotovu HTML sekciju. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija: Alatke za programere
Pokretanja: U vašem pregledaču
Trošak: Besplatno · bez registracije
Dostupnost: Spremno za upotrebu

SVG razdvajač oblikaLokalna obrada

U potpunosti radi u vašem pregledaču

Pregled sekcije

Promena okruženja.

Oblikovana ivica između dve sekcije.

SVG kôd

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

CSS pozicioniranje

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

HTML sekcija

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Koristite boju pozadine sledeće sekcije za neprekinutu ivicu. Okrenite vertikalno kada razdvajač sa dna premeštate na vrh.

Zatvorene putanje i koordinate

SVG 2 definiše komande closepath i cubic za putanje: https://www.w3.org/TR/SVG2/paths.html . viewBox preslikava ove koordinate u okvir prikaza: https://www.w3.org/TR/SVG2/coords.html

Poreklo oblika

Talasasti oblik koristi iste glatke krive kao SVG Wave Generator i SVG Blob Generator; ostali profili nacrtani su pomoću jednostavnih formula. Nema umetničkih radova trećih strana, pa izlaz možete slobodno da koristite.

Kako se koristi

Izaberite oblik i podesite njegovu amplitudu, frekvenciju i visinu.
Podesite slojeve, neprozirnost i boju, a zatim izaberite ivicu sekcije i željena okretanja.
Kopirajte SVG, CSS za pozicioniranje i HTML sekcije ili preuzmite SVG.

Privatnost i ograničenja

Generisanje oblika i preuzimanja u potpunosti se izvršavaju u vašem pregledaču.

Srodne alatke

Često postavljana pitanja

Kako da uklopim ivicu u drugu sekciju?

Koristite boju pozadine te sekcije kao ispunu razdelnika. CSS ostavlja prostor za razdelnik i apsolutno ga pozicionira na izabranoj ivici.

Po čemu se ovo razlikuje od alata za talase?

Ovaj alat dodaje još sedam oblika, invertovanje i HTML sekcije. Postojeći SVG Wave Generator nudi nasumične talase i dodatne kontrole namenjene talasima. SVG Blob Generator pravi nezavisne organske oblike.

Šta radi invertovanje?

Invertovanje zatvara putanju ka vrhu, umesto ka dnu. Razdelna ivica ostaje na istom mestu. Vertikalno okretanje umesto toga preslikava ceo oblik.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban