CSS Clip-Path Oluşturucu

Bu araç, hazır bir şekilden — daire, elips, üçgen, beşgen, altıgen, yıldız veya yuvarlatılmış dikdörtgen — bir CSS clip-path değeri oluşturur ve siz CSS'i kopyalamadan önce kırpılmış şekli bir önizleme kutusunda canlı olarak gösterir. Yaygın şekiller için polygon() koordinatlarını elle hesaplamanıza gerek yoktur.

Bu Araç Nedir?

clip-path, bir öğenin tanımlanmış bölgesinin dışındaki her şeyi gizleyen, yalnızca içindeki şekli görünür bırakan CSS özelliğidir — öğenin kutusunun geri kalanı düzende hâlâ mevcuttur, sadece çizilmez. circle(), ellipse(), inset() gibi temel şekil işlevlerini kabul eder; bunlardan sonuncusu olan polygon() ise düz kenarlı herhangi bir şekli tanımlamak için keyfi sayıda x/y koordinat çifti alır.

polygon() koordinatları elle yazılması en zor kısımdır — bir beşgen, altıgen veya yıldız her biri hassas biçimde yerleştirilmiş birkaç nokta gerektirir ve bunlardan birinin yanlış olması tüm şekli bozar. Bu araç bu koordinatları sizin yerinize hazır bir şekilden hesaplar, canlı önizlemeyi anında günceller ve kopyalamanız için tam olarak doğru clip-path CSS kodunu verir.

Kaynak: CSS Shapes Module Level 1 / CSS Masking Module Level 1, W3C — clip-path'i ve temel şekil işlevlerini tanımlayan spesifikasyonlar.

Neden Kullanmalısınız?

Canlı önizleme, gerçek bir önizleme kutusunu seçilen şekle göre kırpar; böylece koordinatlardan hayal etmek yerine gerçek sonucu görürsünüz.
Yedi hazır şekil — daire, elips, üçgen, beşgen, altıgen, yıldız ve yuvarlatılmış dikdörtgen — polygon noktalarını elle yazmadan clip-path kullanım örneklerinin büyük çoğunluğunu kapsar.
Daire, elips ve yuvarlatılmış dikdörtgen hazır ayarları, koordinatları düzenlemeden şekli ince ayarlamanızı sağlayan bir boyut/yuvarlaklık kaydırıcısı içerir.
Herhangi bir öğeye yapıştırmaya hazır standart clip-path CSS kodu üretir.
Tamamen tarayıcınızda çalışır — yapılandırdığınız hiçbir şey hiçbir yere yüklenmez. Ücretsiz, kayıt gerektirmez, mobilde çalışır.

Nasıl Kullanılır

Açılır menüden bir şekil seçin — daire, elips, üçgen, beşgen, altıgen, yıldız veya yuvarlatılmış dikdörtgen.
Daire, elips ve yuvarlatılmış dikdörtgen şekilleri için kırpmayı ince ayarlamak üzere boyut/yuvarlaklık kaydırıcısını ayarlayın.
Şekli veya kaydırıcıyı değiştirirken önizleme kutusunun canlı olarak güncellenmesini izleyin.
Oluşturulan clip-path CSS kodunu kopyalayın ve kırpmak istediğiniz öğeye yapıştırın.
Düz bir renk yerine bir görsel için, aynı clip-path özelliğini bir <img> öğesine veya arka plan görseli olan bir öğeye uygulayın.

Örnek

Giriş

Shape: Hexagon

Çıkış

clip-path: polygon(50.0% 0.0%, 93.3% 25.0%, 93.3% 75.0%, 50.0% 100.0%, 6.7% 75.0%, 6.7% 25.0%);

Genellikle rozet tarzı profil fotoğrafları veya özellik simgeleri için kullanılan düzgün bir altıgen kırpma.

Temel şekiller ile polygon() karşılaştırması

Daire, elips ve inset (yuvarlatılmış dikdörtgen), kendi basit sözdizimine sahip yerleşik CSS temel şekil işlevleridir — bir veya iki yarıçap, artı isteğe bağlı bir merkez konumu veya köşe yuvarlatma. Üçgen, beşgen, altıgen ve yıldız yerleşik şekiller değildir; hepsi, şeklin dış hattını izleyen düz bir x/y koordinat çifti listesi olan polygon() ile ifade edilir. Bu araç, bu koordinatları düzenli (eşit aralıklı) çokgenler ve beş köşeli bir yıldız için otomatik olarak hesaplar; elle doğru yapması en zahmetli kısım budur.

Yaygın clip-path desenleri

Dairesel avatar veya rozet: dairenin bir elipse gerilmemesi için genellikle kare kaynak görselle birleştirilen, orta düzey yarıçapa sahip circle().
Açılı bölüm ayırıcı: dikdörtgen olmayan bir sayfa kesintisi için tam genişlikteki bir bölümün üst veya alt kenarını eğen özel bir çokgen (burada hazır ayar olarak bulunmaz).
Yıldız derecelendirme simgesi veya rozet şekli: basit durumlar için elle çizilmiş SVG yerine dekoratif bir şekil olarak kullanışlı olan yıldız hazır ayarı.
Altıgen fotoğraf ızgarası: petek düzeninde yerleştirilmiş altıgen kırpılmış görseller — portföy/ekip sayfalarında yaygın bir desen.
Taşan alt öğe içeriğini de kesmesi gereken kırpma için border-radius'a hafif bir alternatif olarak yuvarlatılmış dikdörtgen; çünkü tek başına border-radius, ek bir overflow:hidden olmadan alt öğeleri kırpmaz.

Diğer CSS araçlarıyla eşleştirme

clip-path genellikle kırpılan arka plan olarak bir CSS gradyanı ile veya bir sarmalayıcı öğeye uygulanan bir box-shadow ile birleştirilir (clip-path bir öğenin kendi gölgesini de kırptığından, yine de yüzüyormuş gibi görünmesi gereken kırpılmış bir şekil için üst öğedeki bir gölge genellikle kullanılan çözümdür).

→ CSS Gradyan Oluşturucu · Kenar Yarıçapı Oluşturucu · Kutu Gölgesi Oluşturucu

Sıkça Sorulan Sorular

clip-path, öğenin düzen boyutunu etkiler mi?

Hayır — öğe, düzen amaçları için orijinal kutu boyutunu ve konumunu korur; clip-path yalnızca neyin çizildiğini değiştirir. Çevredeki öğeler, kırpma uygulanmamış gibi düzenlenir; bu, kırpılmış şeklin yeniden boyutlandırılmış bir öğe gibi davranmasını beklerseniz sizi şaşırtabilir.

Kırpılmış şeklimde box-shadow neden görünmüyor?

clip-path, öğenin tüm görüntüsünü, döktüğü gölge de dahil olmak üzere kırpar; bu yüzden daire veya çokgenle kırpılmış bir öğenin kendi box-shadow'u kırpma sınırında kesilir. Görünen şekli takip eden bir gölge elde etmek için box-shadow'u, kırpılmış öğenin etrafındaki kırpılmamış bir sarmalayıcı öğeye uygulayın.

Bir clip-path şeklini animasyonlu hale getirebilir veya geçiş yaptırabilir miyim?

Evet, ancak yalnızca aynı türde ve aynı sayıda noktaya sahip iki clip-path değeri arasında — örneğin, 6 noktalı bir polygon()'dan 6 noktalı başka bir polygon()'a geçiş. Temelde farklı şekiller arasında geçiş (bir circle()'dan bir polygon()'a) genellikle tarayıcılar arasında düzgün bir şekilde animasyonlu hale gelmez.

clip-path yalnızca öğe içeriğinde değil, arka plan görsellerinde de kullanılabilir mi?

clip-path, özellikle arka planı değil, background-image, background-color, kenarlıklar ve içeriği birlikte olmak üzere öğenin tamamını kırpar. Diğer içeriği kırpılmamış bırakarak yalnızca bir arka plan görselini kırpmak istiyorsanız, clip-path'i yalnızca arka planı tutan ayrı bir öğeye uygulayın.

clip-path tüm modern tarayıcılarda destekleniyor mu?

Evet — temel şekil işlevlerine (circle, ellipse, inset, polygon) sahip clip-path, MDN'nin uyumluluk verilerine göre Ocak 2020'den beri başlıca tarayıcılarda geniş çapta kullanılabilir (Baseline) durumdadır. Mevcut tarayıcı sürümleri için bir yedek çözüm olmadan üretimde kullanmak genellikle güvenlidir.