Softonic

CSS clip-path Oluşturucu

Adım 1 / 2
Sonraki

clip-path ile herhangi bir öğeyi çokgen biçiminde keserek SVG katmanları olmadan biçimli görseller, asimetrik hero bölümleri veya konuşma balonları oluşturabilirsiniz. polygon() koordinatlarını elle yazmak hesaplama hatalarına davetiye çıkarır. Bu oluşturucu dört hazır şekil için doğru clip-path bildirimini üretir: üçgen, elmas, yamuk ve altıgen. Bir şekil seçin, kodu oluşturun ve kopyalayın.

clip-path nasıl oluşturulur?

  1. 1

    Şekli seçin

    Dört hazır şekilden birini seçin: üçgen, elmas, yamuk veya altıgen.

  2. 2

    CSS kodunu oluşturun

    Düğmeye tıklayın, araç seçilen şekil için `clip-path: polygon(...)` kuralını oluşturur.

  3. 3

    Kuralı kopyalayın

    Sonucu kopyalayıp stil sayfanıza yapıştırın. Yüzde değerleri şekli öğe boyutuna göre duyarlı tutar.

  4. 4

    Koordinatları okuyun

    Her sayı çifti bir köşedir: o köşenin x ve y konumu, öğe kutusunun yüzdesi olarak.

  5. 5

    Uygulayın

    `clip-path` tüm modern tarayıcılarda her öğede çalışır ve şekil öğeyle birlikte ölçeklenir.

Beş şekil fonksiyonu

Fonksiyon Söz dizimi Kullanım
inset() inset(10% 20% 10% 20% round 8px) İçten boşluklu ve isteğe bağlı yuvarlak köşeli dikdörtgen kesim
circle() circle(50% at 50% 50%) Daire
ellipse() ellipse(40% 25% at 50% 50%) Elips
polygon() polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) Herhangi bir çokgen
path() path("M0 0 L100 0 L50 100 Z") SVG yol verisi (sınırlı destek)

Yaygın çokgen klipler

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

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

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

Hero bölümündeki çapraz kesim muhtemelen hepsi arasında en çok kullanılanıdır; hiç SVG kullanmadan bölüme eğimli, modern bir görünüm kazandırır.

clip-path’i canlandırma

clip-path, her iki durum da aynı şekil fonksiyonuna ve aynı sayıda noktaya sahip olduğu sürece canlanır. 4 köşeli bir çokgen, başka bir 4 köşeli çokgene akıcı şekilde dönüşür; köşe eklemek veya çıkarmak interpolasyonu bozar.

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

Bunu ortaya çıkış efektleri, üzerine gelindiğinde ince bozulmalar veya sayfa geçişleri için kullanın.

clip-path ile overflow: hidden karşılaştırması

overflow: hidden, border-box dikdörtgenine göre keser (bu dikdörtgen border-radius ile yuvarlatılabilir). clip-path ise tanımladığınız herhangi bir şekle göre keser ve gölgeler ile dış çizgiler dahil her şeyi keser. Gölgelerin şeklin dışında da görünür kalmasını istiyorsanız clip-path istediğiniz şey değildir.

filter: drop-shadow(), clip-path uygulanmış öğelere şekli izleyen bir gölgeyi yeniden ekleyebilir, ancak daha yavaştır.

Performans

clip-path, modern tarayıcılarda GPU ile hızlandırılır; bu nedenle animasyonlu clip-path’ler akıcıdır. İstisna, bazı tarayıcılarda CPU ile işlenmeye düşen path() ve 40’tan fazla köşesi olan çok karmaşık çokgenlerdir.

Erişilebilirlik

clip-path yalnızca görünen kısmı değiştirir. Ekran okuyucular, klavye odağı ve işaretçi olayları, kesilmiş şekle değil öğenin tam kutusuna göre hareket eder. Bir görsel yıldız biçiminde kesilirse alt metni normal şekilde okunur. Bir düğme şevron biçiminde kesilirse tıklama hedefi görünen şevron değil, tüm dikdörtgendir; bu da görünüşte boş alanlara yanlışlıkla tıklanmasına yol açabilir.

Olağan dışı kesim biçimine sahip düğmelerde, tıklama alanının (hitbox) görünen alanla makul ölçüde örtüşmesi için öğenin genişliğini ve yüksekliğini dar tutun.

Sık Sorulan Sorular

Tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) polygon(), circle(), ellipse() ve inset() fonksiyonlarını destekler. path(), Chrome 88+, Firefox 97+ ve Safari 13.1+ sürümlerinde desteklenir. IE bunların hiçbirini desteklemez, ancak kullanım oranı artık çoğu site için eşiğin altındadır.

Çünkü clip-path, gölgeleri de diğer her şeyle birlikte keser. Bunun yerine filter: drop-shadow() kullanın; kesilen şekli izler ve gölgeyi görünür tutar.

Yalnızca aynı nokta sayısına sahip aynı şekil fonksiyonu arasında. 4 noktalı bir çokgen, başka bir 4 noktalı çokgene canlanır. Nokta eklemek veya çıkarmak ya da fonksiyon değiştirmek (çokgenden daireye) interpolasyonu bozar.

Hayır, işaretçi olayları hâlâ öğenin tam dikdörtgenine yönlendirilir. Yıldız şeklindeki bir düğmenin, saydam köşeler dahil dikdörtgen bir tıklama alanı vardır. Bu önemliyse ::before üzerinde pointer-events: none kullanmayı düşünün ya da boyutları sıkıca ayarlanmış öğeler kullanın.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur