DESIGN

CSS Clip-Path Oluşturucu — Yaratıcı Şekiller

20 Aralık 2025

CSS clip-path, dikdörtgen kutu düzeninin kısıtlamalarını aşarak benzersiz ve yaratıcı şekiller oluşturmanıza olanak tanır.

Clip-Path Şekilleri

inset(): İçe doğru kırpma, yuvarlak köşe desteği
circle(): Dairesel kırpma
ellipse(): Elips kırpma
polygon(): Çokgen şekil
path(): Karmaşık şekiller için SVG yolu

Popüler Kırpma Efektleri

/* Çapraz bölüm */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

/* Ok */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);

/* Daire */
clip-path: circle(50%);

Animasyonlarla Kombinasyon

clip-path, CSS transition ve animation ile pürüzsüzce dönüştürülebilir. Her iki şeklin de aynı nokta sayısına sahip olması gerekir.

Bu aracı dene CSS Clip-Path Oluşturucu →