CSS Ayırıcı Oluşturucu

Basit çizgi ayırıcılar

/* Subtle horizontal rule */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* With text in the middle */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Eğimli bölüm geçişi

clip-path tekniği:

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

Sol alt köşe 48px yukarı çekilerek çapraz bir eğim oluşturur. Geçişin temiz olması için bir sonraki bölüm tam eğime yaslanarak başlamalıdır; beyaz boşluk kalmamalıdır.

Çaprazın ters yöne gitmesini isterseniz, hangi alt köşenin kaldırılacağını değiştirin. Çentik veya zigzag için daha fazla köşe noktası ekleyin.

SVG dalga ayırıcıları

Organik eğriler oluşturmanın en temiz yolu SVG’dir:

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* close any subpixel gap */
}

preserveAspectRatio="none", SVG’nin kaynak boyutlarından bağımsız olarak kapsayıcının genişliğine kadar uzamasını sağlar. margin-top: -1px ise bazı işleyicilerin bıraktığı kıl payı boşluğu kapatır.

Sık kullanılan ayırıcı kütüphanesi

Kullanışlı kod parçaları:

İpuçları

• Birleşim noktasını eşleştirin. Ayırıcının arka planı (SVG dolgusu veya eğimli bölümün rengi), bir sonraki bölümün arka planıyla tam olarak eşleşmelidir. Yalnızca 1px’lik bir renk farkı bile etkiyi bozar.
• Dar ekranlarda keskin eğrilerden kaçının. 1440px’de zarif görünen bir dalga, 360px’de ezilmiş bir sinüs gibi görünebilir. Mobilde medya sorgularıyla genliği küçültün veya farklı bir SVG yolu kullanın.
• Birden fazla ayırıcıyı üst üste koymayın. Her bölüm sınırı için bir birleşim noktası yeterlidir.
• Performans. Satır içi SVG ayırıcılar ihmal edilebilir düzeydedir; görüntü tabanlı ayırıcılar bir ağ isteğine mal olur. Satır içi SVG kazanır.