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

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur