CSS clip-path ile Yaratıcı Şekiller Oluşturma

CSS clip-path özelliği, bir elemanın görünür alanını belirli bir şekle göre kırpmanızı sağlar. Dikdörtgen kutulardan oluşan geleneksel web düzenine kırılarak daireler, üçgenler, çokgenler ve hatta karmaşık SVG yolları ile yaratıcı tasarımlar oluşturabilirsiniz.

clip-path Nedir?

clip-path, bir elemanın hangi bölümlerinin görüneceğini tanımlayan bir kırpma maskesidir. Kırpma alanının dışında kalan içerik gizlenir ancak DOM'da kalmaya devam eder:

.element {
  clip-path: circle(50%);
  /* Eleman daire şeklinde kırpılır */
}

Önemli nokta: clip-path yalnızca görsel kırpma yapar — elemanın tıklama alanı, erişilebilirliği ve DOM yapısı değişmez.

Temel Şekiller

circle() — Daire

Bir daire oluşturur. Yarıçap ve merkez noktası belirtebilirsiniz:

/* Elemanın %50'si yarıçaplı, merkezde daire */
clip-path: circle(50%);

/* 100px yarıçaplı, belirli konumda daire */
clip-path: circle(100px at 50% 50%);

/* Sol üstte küçük daire */
clip-path: circle(30% at 25% 25%);

ellipse() — Elips

Yatay ve dikey yarıçapları farklı olan bir oval oluşturur:

/* Yatay %40, dikey %60 yarıçaplı elips */
clip-path: ellipse(40% 60% at 50% 50%);

/* Geniş yatay elips */
clip-path: ellipse(60% 30% at center);

inset() — İç Dikdörtgen

Kenarlardan içeri doğru kırparak bir dikdörtgen oluşturur. Yuvarlatılmış köşeler ekleyebilirsiniz:

/* Her kenardan 20px içeri kırp */
clip-path: inset(20px);

/* Farklı kenarlar: üst sağ alt sol */
clip-path: inset(10px 20px 30px 40px);

/* Yuvarlatılmış köşelerle */
clip-path: inset(10% round 20px);
clip-path: inset(5% 10% 5% 10% round 50px);

polygon() — Çokgen

En esnek şekil fonksiyonudur. Köşe noktalarını koordinatlarla belirtirsiniz:

/* Üçgen */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

/* Beşgen */
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

/* Ok şekli */
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

/* Çapraz kesim */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);

/* Altıgen */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

path() Fonksiyonu

SVG path söz dizimi ile karmaşık şekiller oluşturabilirsiniz:

/* Kalp şekli */
clip-path: path('M 50,20 C 50,20 20,0 20,35 C 20,60 50,80 50,80 C 50,80 80,60 80,35 C 80,0 50,20 50,20 Z');

/* Yıldız */
clip-path: path('M 50,5 L 63,40 L 100,40 L 70,62 L 80,95 L 50,75 L 20,95 L 30,62 L 0,40 L 37,40 Z');

path() fonksiyonu, SVG editöründe oluşturduğunuz herhangi bir şekli CSS'e taşımanıza olanak tanır.

Geçiş Animasyonları

clip-path, transition ile animasyonlanabilir — ancak aynı şekil fonksiyonu ve aynı sayıda nokta kullanılmalıdır:

.card {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.6s ease-in-out;
}

.card:hover {
  clip-path: circle(75% at 50% 50%);
}

/* Polygon geçişi — aynı sayıda nokta olmalı */
.shape {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: clip-path 0.4s ease;
}

.shape:hover {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

Önemli: Farklı şekil fonksiyonları arasında (örneğin circle()'dan polygon()'a) geçiş animasyonu çalışmaz. Ayrıca polygon'larda iki durumda da aynı sayıda köşe noktası olmalıdır.

Yaratıcı Örnekler

Çapraz Bölüm Geçişi

.hero-section {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.next-section {
  margin-top: -5vh;
  /* Üst bölümün çapraz kenarıyla örtüşür */
}

Profil Fotoğrafı

.avatar {
  clip-path: circle(50%);
  width: 120px;
  height: 120px;
  object-fit: cover;
}

/* Altıgen avatar */
.avatar-hex {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

Reveal Animasyonu

@keyframes reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.reveal-text {
  animation: reveal 1s ease forwards;
}

Tarayıcı Desteği ve İpuçları

• clip-path temel şekilleri tüm modern tarayıcılarda desteklenir
• path() fonksiyonu daha yeni tarayıcılarda desteklenir — alternatif olarak SVG clipPath kullanabilirsiniz
• Kırpılmış elemanlar hâlâ dikdörtgen alan kaplar — clip-path layout'u etkilemez
• Performans açısından clip-path animasyonları GPU hızlandırmalıdır ve genellikle akıcı çalışır
• Erişilebilirlik: Kırpılmış içerik ekran okuyucular tarafından hâlâ okunabilir