Skip to main content
FreeToolkit .ai

CSS Kırpma Yolu Oluşturucu Poligon, daire ve elips önceden ayarlanmış değerleriyle CSS kırpma yolu şekilleri oluşturun.

CSS Kırpma Yolu Oluşturucu illustration
🎨

CSS Kırpma Yolu Oluşturucu

Poligon, daire ve elips önceden ayarlanmış değerleriyle CSS kırpma yolu şekilleri oluşturun.

1

Önceden tanımlanmış bir şekli seçin

Üçgen, altıgen, yıldız, daire veya elips gibi yerleşik önceden tanımlanmış şekillerden seçim yapın.

2

Yolu özelleştirin

Tam kontrol için clip-path değerini doğrudan düzenleyin.

3

CSS'yi kopyalayın

Kesilmiş şekli önizleyin ve webkit önekli CSS'yi kopyalayın.

Loading tool...

What Is CSS Kırpma Yolu Oluşturucu?

CSS Kırpma Yolu Oluşturucu, HTML öğeleri için kırpma maskeleri oluşturmak amacıyla clip-path özelliğini kullanır. Clip-path, bir öğe için görünen bölgeyi tanımlar - yol dışındaki her şey gizlenir. Bu araç, çoklu şekil işlevlerini destekler: özel çok noktalı şekiller için polygon, dairesel kırpma için circle, oval şekiller için ellipse ve dikdörtgen kırpma için inset. Önceden tanımlanmış şekiller kütüphanesi üçgen, trapezoid, paralelkenar, rombus, beşgen, altıgen ve yıldız içerir. Ayrıca, özel şekiller oluşturmak için clip-path değerini doğrudan düzenleyebilirsiniz. Oluşturulan CSS, daha geniş tarayıcı desteği için -webkit-clip-path ön eklerini içerir. Clip-path, dikdörtgensel olmayan düzenler, görüntü maskeleri, yaratıcı bölüm bölmeleri ve benzersiz UI öğesi şekilleri oluşturmak için güçlüdür.

Why Use CSS Kırpma Yolu Oluşturucu?

  • Çokgenler, daireler ve yıldızlar dahil kapsamlı önceden tanımlanmış şekil kütüphanesi
  • Özel şekiller için clip-path değerlerinin doğrudan düzenlenmesi
  • Daha geniş tarayıcı desteği için webkit önekli dahil
  • Arka plan rengini özelleştirebileceğiniz gerçek zamanlı önizleme

Common Use Cases

Görüntü Maskeleri

Görüntüleri daireler, altıgenler veya yıldızlar gibi özel şekillere keserek maskelleyin.

Bölüm Ayraçları

clip-path ile açılı veya eğri bölüm geçişleri oluşturun.

Yaratıcı Düzenler

Benzersiz sayfa tasarımları için dikdörtgen olmayan içerik alanları oluşturun.

Profil Fotoğrafları

Kullanıcı avatarlarını altıgen veya yuvarlak şekillere keserek düzenleyin.

Technical Guide

CSS clip-path özelliği birkaç şekil işlevini kabul eder: polygon() bir şekli yüzde veya uzunluk olarak koordinat çiftleri kullanarak tanımlar. circle() yarıçap ve merkez konumu ile dairesel bir kırpma oluşturur. ellipse() yatay ve dikey yarıçaplarla oval bir şekil oluşturur. inset() seçime bağlı sınır yarıçapı ile dikdörtgen bir kırpma oluşturur. Polygon işlevi, en esnek olanı, herhangi bir sayıda x y koordinat çiftini kabul eder. Koordinatlar öğeye göredir - 0% 0% sol üst köşe ve 100% 100% sağ alt köşedir. Animasyonlar için, aynı şekil işlevi ve aynı número noktalar kullanıldığında clip-path geçişlidir. Modern tarayıcılarda tarayıcı desteği iyidir, ancak Safari için -webkit- ön eki önerilir. Clip-path düzeni etkilemez - öğe orijinal kutu modeli boyutlarını korur.

Tips & Best Practices

  • 1
    Özel şekiller için önceden tanımlanmış bir şekil ile başlayın ve değerleri değiştirin
  • 2
    Canlı geçişler için aynı sayıda çokgen noktası kullanın
  • 3
    Açığa çıkarma ve dönüşüm efektleri için CSS geçişleri ile birleştirin
  • 4
    clip-path, görüntüler ve arka plan öğeleri üzerinde harika çalışır

Related Tools

CSS Üçgen Oluşturucu - free online tool

CSS Üçgen Oluşturucu

Kenar tekniklerini kullanarak yön ve renk kontrolleriyle CSS üçgenleri oluşturun.

🎨 CSS & Design
CSS Blob Oluşturucu - free online tool

CSS Blob Oluşturucu

Organik blob şekillerini gradient dolguları ve rastgelelik ile SVG olarak oluştur.

🎨 CSS & Design
CSS Dalgıç Oluşturucu - free online tool

CSS Dalgıç Oluşturucu

Özelleştirilebilir dalgılar, yükseklik ve renkler ile SVG dalga bölme çubukları oluşturun.

🎨 CSS & Design
CSS Bölücü Oluşturucu - free online tool

CSS Bölücü Oluşturucu

Multiple stil seçenekleri ile birlikte gradient, gölge ve zigzag dahil CSS bölüm bölücülerini oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q clip-path, öğe düzenini etkiler mi?
Hayır, öğe tam kutu modelini korur. Sadece görünür rendering clip tarafından etkilidir.
Q clip-path'i canlandırabilir miyim?
Evet, clip-path aynı fonksiyon ve nokta sayısını kullandığında CSS geçişleri destekler.
Q clip-path tüm tarayıcılarda destekleniyor mu?
Modern tarayıcılar clip-path'i destekler. -webkit- önekli Safari uyumluluğunu sağlar. IE, clip-path'i desteklemez.
Q Metni clip-path ile kesebilir miyim?
Evet, clip-path metin konteynırları dahil herhangi bir HTML öğesi üzerinde çalışır. Metin özgü kesme için -webkit-background-clip: text kullanın.
Q clip-path ve mask arasındaki fark nedir?
clip-path sert kenarlı kesme için şekil fonksiyonlarını kullanır. CSS mask, resimler veya gradyanlar kullanır ve yumuşak kenarlar ve kısmi şeffafliği destekler.

About This Tool

CSS Kırpma Yolu Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.