CSS Clip Path Oluşturucu
Daire, elips, yıldız ve çokgen gibi geometrik şekiller için CSS clip-path maskeleme kodları üretin.
Aracı çalıştır
CSS Clip Path Generator, web sayfalarındaki görsel ve arayüz elemanlarına geometrik maskeleme uygulamak için hazır CSS `clip-path` bildirimleri üretir. Araç; daire, elips, üçgen, altıgen, beşgen, yıldız ve baklava dilimi olmak üzere yedi temel geometrik şablonu destekler.
Daire ve elips geometrileri için boyut ve konum parametrelerini özelleştirebilirsiniz. Daire şablonu belirtilen boyut değerini yüzde olarak kullanır ve girilen konumu `at` ifadesiyle bağlar. Elips geometrisinde ilk değer belirtilen boyutu, ikinci değer ise bu boyutun 0.6 katını alarak ilgili konuma yerleşir. Üçgen, altıgen, beşgen, yıldız ve baklava dilimi şablonları sabit yüzde koordinatlarına sahip çokgen (`polygon`) yapıları kullanır; bu modellerde boyut ve konum girdileri şablon koordinatlarını değiştirmez. Tanımlı şablon adları dışında bir metin girildiğinde araç otomatik olarak daire yapısını temel alır.
Üretilen CSS kodunu kopyalayıp doğrudan stil dosyanıza veya HTML içi `style` niteliğine ekleyerek modern kırpma efektlerini arayüz tasarımlarınıza uygulayabilirsiniz.
Kullanım
- Şekil kutusuna desteklenen geometrik formlardan birini yazın: circle, ellipse, triangle, hexagon, pentagon, star veya diamond.
- Daire ya da elips şablonları için boyut değerini sayısal olarak belirleyin.
- Şeklin merkez noktasını belirlemek için konum kutusuna bir CSS yerleşim değeri girin (örneğin: center, top left, 50% 50%).
- Aracı çalıştırdıktan sonra sonuç panelinde beliren CSS kodunu kopyalayıp stil dosyanıza yapıştırın.
Örnekler
- Şekil olarak 'circle', boyut olarak 40 ve konum olarak 'center' girildiğinde: clip-path: circle(40% at center);
- Şekil olarak 'star' girildiğinde: clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
SSS
Desteklenen şablonlar dışında bir şekil adı yazarsam ne olur?
Tanımlı yedi şablon haricinde bir değer girildiğinde araç varsayılan daire (circle) geometrisini uygular.
Boyut ve konum ayarları yıldız veya çokgen şekillerini etkiler mi?
Hayır. Üçgen, altıgen, beşgen, yıldız ve baklava dilimi şablonları sabit yüzde koordinatlı çokgen yapıları kullanır; boyut ve konum yalnızca daire ve elips üzerinde etkilidir.
Elips geometrisinde dikey ve yatay yarıçap nasıl hesaplanır?
İlk yarıçap girilen boyut değerini doğrudan yüzde olarak alır; ikinci yarıçap ise bu değerin 0.6 ile çarpılmasıyla hesaplanır.