CSS Araçları

CSS Clip Path Oluşturucu

CSS clip-path özelliğini görsel olarak oluşturun. Polygon, circle, ellipse ve inset şekillerini sürükle-bırak ile tasarlayın.

1234
Tıklayarak nokta ekleyin / Sağ tıklayarak silin
Nokta sayısı:4
CSS Kodu
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Hazır Şekiller
Üçgen
Beşgen
Altıgen
Yıldız
Ok
Haç
Kalp
Baklava

Ne işe yarar?

CSS clip-path özelliği, bir HTML elemanının görünür alanını belirli bir şekille sınırlamanızı sağlar. Bu araç ile polygon, circle, ellipse ve inset olmak üzere dört farklı clip-path türünü görsel olarak tasarlayabilir, noktaları sürükle-bırak ile konumlandırabilir ve oluşturulan CSS kodunu tek tıkla kopyalayabilirsiniz.

Nasıl kullanılır?

Üstteki sekmelerden şekil türünü seçin. Polygon modunda önizleme alanına tıklayarak yeni nokta ekleyebilir, mevcut noktaları sürükleyerek konumlandırabilir ve sağ tıklayarak silebilirsiniz. Hazır şekillerden (üçgen, yıldız, kalp vb.) başlayarak düzenleme yapabilirsiniz. Circle ve Ellipse modlarında merkez noktasını sürükleyebilir, yarıçapları kaydırıcılarla ayarlayabilirsiniz. Inset modunda kenar boşluklarını ve köşe yarıçapını kontrol edebilirsiniz.