SVG / Bölümler

SVG Şekil Bölücü: Bölüm Kenarları ve Katmanlar

Genlik, frekans, yükseklik, çevirme, ters dolgu ve üçe kadar katmanla sekiz SVG bölüm ayırıcı şekli oluşturun. Bölümü önizleyin, SVG, CSS ve HTML'yi kopyalayın.

SVG Şekil Bölücü: Bölüm Kenarları ve Katmanlar: Dalga, eğri, eğim, üçgen, ok, zikzak, bulut ya da dağ kenarlarından birini seçin; yüksekliğini, genliğini ve tekrarlarını ayarlayın, çevirin veya tersine çevirin ve üçe kadar katmanı üst üste ekleyin. Bölücü, her sayfa genişliğine uyum sağlar; SVG'yi, konumlandırma CSS'sini veya hazır HTML bölümünü kopyalayın. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Geliştirici araçları
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
SVG şekil ayırıcıYerel işleme

Tamamen tarayıcınızda çalışır

Bölüm önizlemesi

Manzarayı değiştirin.

İki bölüm arasında şekilli bir kenar.

Bölüm ayırıcı
SVG kodu
<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 konumlandırma
.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 bölümü
<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>

Kesintisiz bir kenar için sonraki bölümün arka plan rengini kullanın. Alt ayırıcıyı üste taşırken dikey olarak çevirin.

Kapalı yollar ve koordinatlar

SVG 2, closepath ve kübik yol komutlarını tanımlar: https://www.w3.org/TR/SVG2/paths.html . viewBox, bu koordinatları görünüm alanına eşler: https://www.w3.org/TR/SVG2/coords.html

Şekillerin kaynağı

Dalga şekli, SVG Wave Generator ve SVG Blob Generator ile aynı yumuşak eğrileri kullanır; diğer profiller basit formüllerden çizilir. Üçüncü taraf çizimleri dahil edilmez; bu nedenle çıktıyı kullanmak size aittir.

Nasıl kullanılır?

  1. Bir şekil seçin; genlik, frekans ve yüksekliğini ayarlayın.
  2. Katmanları, opaklığı ve rengi ayarlayın; ardından bölüm kenarını ve varsa çevirmeleri seçin.
  3. SVG'yi, konumlandırma CSS'sini ve bölüm HTML'sini kopyalayın veya SVG'yi indirin.

Gizlilik ve sınırlamalar

Şekil oluşturma ve indirme işlemleri tamamen tarayıcınızda çalışır.

İlgili araçlar

SVG dalgaSVG blobCSS deseni

Sık sorulan sorular

Kenarın başka bir bölümle bütünleşmesini nasıl sağlarım?

Bölümün arka plan rengini bölücü dolgusu olarak kullanın. CSS, bölücü için yer ayırır ve onu seçilen kenara mutlak konumla yerleştirir.

Bu araç dalga aracından nasıl farklıdır?

Bu araçta yedi ek şeklin yanı sıra tersine çevirme ve bölüm HTML'si bulunur. Mevcut SVG Dalga Oluşturucu rastgele dalgalar ve dalgalara özel ek kontroller sunar. SVG Blob Oluşturucu ise bağımsız organik şekiller oluşturur.

Tersine çevirme ne işe yarar?

Tersine çevirme, yolu alt yerine üste doğru kapatır. Bölücü kenarını yerinde tutar. Dikey çevirme ise bunun yerine şeklin tamamını yansıtır.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez