Ücretsiz geliştirici aracı

CSS Clip-Path Şekil Üretici

Hazır şekillerden başla veya çokgen noktalarını sürükle; canlı sonucu izle ve polygon() kodunu kopyala.

Canlı önizleme

Noktaları önizleme üzerinde sürükleyebilirsin.

Üretilen kod

.clipped-shape {
  width: 320px;
  aspect-ratio: 1;
  background: #cc3d0a;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}

Ayarlar

Hazır biçimler

Nokta sayısı6

Ana renk

Standart çıktı üreten görsel bir araç

Bu araç doğrudan manipülasyonu düz CSS, SVG, HTML veya görsel dosyasına çevirir. Önizleme ve çıktı aynı durumdan üretildiği için kopyaladığın kod ekranda gördüğün sonucu tarif eder.

Çıktıyı her yerde kullan

Üretilen değerin LibraryCSS çalışma zamanı bağımlılığı yoktur. Stil dosyana, bileşenine, prototipine veya tasarım teslimine yapıştırıp sınıf adını projenle eşleştirmen yeterlidir.

Hiçbir şey saklanmaz

Tüm kontroller tarayıcıda çalışır. Değerler, üretilen metinler ve indirilen varlıklar hesaba kaydedilmez veya işleme servisine gönderilmez.