CSS Clip-Path Generator

Generate CSS clip-path shapes visually.

Şekil türü

Yarıçap: 40%

Merkez X: 50%

Merkez Y: 50%

Canlı önizleme

Oluşturulan CSS

.element {
  clip-path: circle(40% at 50% 50%);
}

Bu araç hakkında

CSS Clip-Path Oluşturucu, dört şekil türü için clip-path değerleri oluşturur: circle(), ellipse(), inset() ve polygon().

SVG dosyaları gerektirmeden yaratıcı düzenler, resim maskeleri ve hero bölüm şekilleri oluşturmayı sağlar. Tüm parametreler canlı önizlemeyi gerçek zamanlı günceller.

Nasıl kullanılır

Bir şekil türü seçin: circle, ellipse, inset veya polygon.
Şekil parametrelerini yapılandırmak için kaydırıcıları ayarlayın.
Poligonlar için listeden hazır bir şekil seçin.
Canlı önizleme ayarlama sırasında güncellenir.
CSS'i panoya kopyalamak için Kopyala'ya tıklayın.

Kullanım senaryoları

Hero bölümler görsel ayırıcı olarak köşegen veya eğri clip-path şekilleri kullanır. Profil resimleri circle() kullanır. Hover efektleri clip-path animasyonları kullanır.

Sık sorulan sorular

Clip-path tıklanabilir alanı etkiler mi? — Evet. Kesilen bölgeler tıklanamaz.
Clip-path'i canlandırabilir miyim? — Evet. Aynı sayıda noktaya sahip iki çokgen şekli arasında geçiş yapılabilir.
Clip-path tüm tarayıcılarda destekleniyor mu? — Evet, tüm modern tarayıcılarda tam destek vardır.