İçeriğe geç
LibraryCSS
clip-pathOrta512 efektte kullanılıyor

clip-path ile şekil kesme

clip-path, bir elemanın hangi bölgesinin görünür kalacağını geometrik bir şekille tanımlar. Şeklin dışında kalan her şey — arka plan, çerçeve, gölge, metin — çizilmez. Elemanın kutusu değişmez: kaplayacağı alan, sayfa akışındaki yeri ve tıklanabilir bölgesi kesilmiş görüntüye göre yeniden hesaplanmaz, yalnızca boyama etkilenir.

Bu, sekme çubuğundaki eğik kenarları, bilet kenarındaki oyukları, altıgen avatarları ve açılış sırasında daire gibi genişleyen katmanları saf CSS'le yazmayı mümkün kılar. Rehber temel şekil fonksiyonlarını, animasyonun hangi şartla çalıştığını ve sık yapılan hataları anlatıyor.

Şekil fonksiyonları

clip-path beş temel değer alır. inset() dikdörtgen kırpar ve isteğe bağlı köşe yarıçapı kabul eder. circle() yarıçap ve merkez ister. ellipse() iki yarıçap alır. polygon() virgülle ayrılmış köşe listesiyle istediğin çokgeni çizer. path() ise doğrudan bir SVG yol dizesi kabul eder ve eğri kenarlara izin verir.

Koordinatlar elemanın referans kutusuna görelidir; sol üst köşe 0 0, sağ alt köşe 100% 100%'dür. Yüzde kullanmak şekli eleman boyutuyla birlikte ölçekler, px kullanmak sabit tutar. İkisi calc() ile karıştırılabilir: calc(100% - 18px) yazmak, eleman ne kadar genişlerse genişlesin sağdan tam 18 piksellik bir pah bırakır.

circle() ve ellipse() içinde closest-side / farthest-side anahtar sözcükleri, yarıçapı elemanın en yakın ya da en uzak kenarına oturtur. Kare olmayan bir elemanı tam daire yapmak için circle(closest-side) yazmak, yarıçapı elle hesaplamaktan daha dayanıklıdır.

cssBeş fonksiyonun karşılaştırması
.dikdortgen { clip-path: inset(10% 20% 10% 20% round 12px); }
.daire      { clip-path: circle(50% at 50% 50%); }
.elips      { clip-path: ellipse(40% 25% at 50% 50%); }
.ucgen      { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.egri       { clip-path: path("M 0 0 H 200 V 100 Q 100 160 0 100 Z"); }
csscalc() ile ölçekten bağımsız köşe pahı
.pah-kart {
  /* Sağ üst köşeden 18px'lik sabit bir pah — kart genişlese de aynı kalır */
  clip-path: polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% 100%,
    0 100%
  );
  background: linear-gradient(135deg, #1d4ed8, #0ea5e9);
  padding: 1.5rem;
}

Animasyon: aynı fonksiyon, aynı nokta sayısı

clip-path animasyonlanabilir ama tek bir şartla: başlangıç ve bitiş değerlerinin aynı şekil fonksiyonunu kullanması ve polygon() söz konusuysa aynı sayıda köşeye sahip olması gerekir. circle()'dan polygon()'a geçiş ara değer üretemez, tarayıcı doğrudan son değere atlar. Aynı şekilde 3 köşeli bir çokgenden 5 köşeliye geçiş de sıçrar.

Çözüm basittir: az köşeli şekle fazladan köşeler eklersin, ama bunları üst üste bindirirsin. Üçgeni dört köşeli yazıp iki köşeyi aynı koordinata koyarsan, gözle görünüş değişmez ama artık dörtgene yumuşak geçiş yapabilir.

Dairesel açılış (circle reveal) kalıbı da bu kuralın en yaygın kullanımıdır: circle(0% at 50% 50%) değerinden circle(75% at 50% 50%) değerine geçmek, merkezden dışa doğru açılan bir katman verir. Yarıçapı 150% gibi bir değere çıkarmak, elemanın köşelerinin de kapsandığından emin olmanı sağlar.

cssMerkezden açılan katman
.acilis {
  position: relative;
  overflow: hidden;
}

.acilis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1d4ed8;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 520ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* 75% köşeleri de kapsar: yarıçap kenara değil köşegene yetmeli */
.acilis:hover::after { clip-path: circle(75% at 50% 50%); }
cssKöşe sayısını eşitleyerek üçgen → dörtgen geçişi
.morf {
  /* Üçüncü ve dördüncü köşe aynı noktada: gözle üçgen görünür */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%);
  transition: clip-path 400ms ease;
}

.morf:hover {
  clip-path: polygon(50% 0%, 100% 35%, 82% 100%, 18% 100%);
}

Referans kutusu ve etkileşim alanı

Şekil fonksiyonundan sonra bir kutu anahtar sözcüğü yazabilirsin: border-box, padding-box, content-box, margin-box ya da SVG bağlamında view-box. Varsayılan border-box'tır. clip-path: circle(50%) content-box yazmak, dairenin dolgunun içindeki alana göre hesaplanmasını sağlar — dolgu kalınsa şekil belirgin biçimde küçülür.

Kesim boyamayı etkilediği gibi işaretleme olaylarını da etkiler: kesilen bölge tıklanamaz hâle gelir. Bu genelde istenen davranıştır (altıgen bir buton yalnızca altıgen alanında tıklanır) ama beklenmedik sonuçlar da doğurur. Kesilmiş bir kartın köşesine denk gelen bağlantı çalışmaz görünür; oysa sorun bağlantıda değil, elemanın kırpılmış olmasındadır.

Kritik bir sınır: clip-path elemanın dışına taşan hiçbir şeyi göstermez, dolayısıyla box-shadow da kesilir. Kesilmiş bir elemana gölge vermek istiyorsan gölgeyi elemana değil, onu saran kaba filter: drop-shadow() ile uygularsın — drop-shadow opak piksellerin dış hattını takip ettiği için kesilmiş şeklin konturunu doğru izler.

cssKesilmiş elemana gölge — drop-shadow sarmalayıcıda
.rozet-kap {
  /* Gölge kesilen değil saran elemanda: şeklin konturunu takip eder */
  filter: drop-shadow(0 10px 22px rgb(29 78 216 / 0.45));
}

.rozet {
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  background: linear-gradient(160deg, #3b82f6, #1d4ed8);
  aspect-ratio: 1;
  width: 120px;
}

Ne zaman clip-path, ne zaman mask

clip-path ile mask sık karıştırılır. Fark keskindir: clip-path geometrik bir sınır çizer ve kenarları keskindir (yalnızca kenar yumuşatma kadar geçiş vardır). mask ise piksel başına saydamlık uygular, dolayısıyla gradyanla yumuşayan, dereceli kaybolan kenarlar üretebilir. Solup giden bir kenar istiyorsan mask; net bir çokgen kesim istiyorsan clip-path doğru araçtır.

Basit dairesel kesimler için border-radius: 50% hâlâ en ucuz yöntemdir ve her tarayıcıda çalışır. clip-path'e ancak border-radius'un ifade edemediği şekiller — üçgen, altıgen, oyuk kenar, eğik pah — gerektiğinde geç.

Performans tarafında clip-path boyama aşamasında uygulanır ve statik kullanımda maliyeti ihmal edilebilir. Animasyonlu kullanımda ise her karede yeniden kırpma hesabı yapılır; bu, transform animasyonu kadar ucuz değildir. Uzun listelerde onlarca elemanın clip-path animasyonunu aynı anda çalıştırmak yerine yalnızca etkileşimdeki elemanı animasyonlamak daha güvenlidir.

Katalogdan canlı örnekler

Aşağıdakiler clip-path kullanan gerçek efektler — anlatılan teknik burada çalışır hâlde. Herhangi birine tıklayıp tam kaynağını açabilir, tarayıcı içi editörde değiştirip sonucu anında görebilirsin.

clip-path kullanan 512 efektin tümü

Tarayıcı desteği

Sürüm numaraları özelliğin öneksiz ve varsayılan olarak açık hâle geldiği ilk kararlı sürümü gösterir.

ÖzellikTarayıcılarNot
clip-path: inset / circle / ellipse / polygonChrome 55+, Firefox 54+, Safari 9.1+ (öneki), Edge 79+Safari 9–13 arası `-webkit-clip-path` gerektirir; bugün için öneksiz yazım yeterli.
clip-path: path()Chrome 88+, Firefox 97+, Safari 13.1+SVG yol dizesi kabul eder ve eğri kenar sağlar; ama yüzde kabul etmediği için duyarlı değildir.
clip-path: shape()Chrome 135+, Safari 18.4+path()'in duyarlı sürümü — yüzde ve calc() kullanılabilir. Firefox'ta henüz yok, @supports ile koru.
clip-path animasyonuChrome 55+, Firefox 54+, Safari 9.1+Yalnızca aynı fonksiyon ve aynı köşe sayısı arasında ara değer üretilir; aksi hâlde geçiş sıçrar.

Yaygın hatalar

  • Farklı köşe sayısı arasında geçiş denemek

    3 köşeli polygon()'dan 6 köşeliye geçiş animasyonlanmaz, doğrudan son değere atlar. Az köşeli şekle üst üste binen sahte köşeler ekleyerek sayıları eşitle.

  • box-shadow'un kaybolması

    Gölge elemanın kutusunun dışında çizilir ve kesim onu da yok eder. Gölgeyi saran elemana filter: drop-shadow() olarak taşı.

  • polygon() köşelerini saat yönünün tersine yazmak

    Sıra karışıksa kenarlar kesişir ve şekil kum saatine döner. Köşeleri tek yönde, tercihen saat yönünde sırala.

  • Kesilen alanın tıklanmaya kapanması

    Kırpılan bölge işaretleme olaylarını almaz. Kart köşesindeki bir bağlantı kesim alanının dışında kalıyorsa tıklanamaz görünür; kesim sınırını etkileşimli alanlara göre ayarla.

  • path() ile duyarlı tasarım beklemek

    path() yalnızca mutlak birim kabul eder, eleman büyüdüğünde şekil ölçeklenmez. Duyarlılık gerekiyorsa polygon() yüzdeleriyle ya da destek varsa shape() ile yaz.

Sıkça sorulan sorular

clip-path ile border-radius arasında ne fark var?
border-radius yalnızca köşeleri yuvarlatır ve elemanın taşan çocuklarını da kırpar. clip-path istediğin geometrik şekli tanımlar ve gölge dahil elemanın dışında kalan her şeyi keser. Basit yuvarlak köşe için border-radius daha ucuz ve daha uyumludur.
clip-path animasyonu neden çalışmıyor?
Neredeyse her zaman şekil fonksiyonları uyuşmadığı içindir. inset()'ten circle()'a ya da 4 köşeli polygon'dan 6 köşeliye geçişte tarayıcı ara değer üretemez ve animasyon sıçrar. Her iki değeri de aynı fonksiyonla ve aynı köşe sayısıyla yaz.
Kesilmiş elemana nasıl gölge veririm?
Elemanı bir sarmalayıcıya al ve gölgeyi sarmalayıcıya `filter: drop-shadow(0 10px 20px rgb(0 0 0 / 0.4))` olarak uygula. drop-shadow şeklin opak piksellerini takip eder, dolayısıyla kesilmiş konturun etrafını doğru çizer.
Karmaşık poligon koordinatlarını elle mi yazmalıyım?
Basit şekiller için elle yazmak en temizidir; altıgen, üçgen ve pah köşe birkaç koordinattan ibarettir. Karmaşık şekillerde SVG olarak çizip path() ya da shape() ile aktarmak daha pratiktir. Katalogdaki efektlerin kodunu açıp koordinatları başlangıç noktası olarak kullanabilirsin.
clip-path performansı düşürür mü?
Statik kullanımda maliyeti çok düşüktür, boyama aşamasında bir kez uygulanır. Animasyonlu kullanımda her karede yeniden kırpma hesaplanır; transform animasyonundan pahalıdır. Aynı anda düzinelerce elemanın kesimini animasyonlamaktan kaçın.

İlgili rehberler

Son güncelleme:

Tüm rehberler