Geliştirici / CSS şekilleri

CSS Clip Path Oluşturucu: Poligon, Daire, Elips ve Inset

Altı poligon ön ayarı, sürüklenebilir ve klavyeyle ayarlanabilir noktalar, daire, elips ve inset kontrolleriyle CSS kesimleri oluşturun. Degrade veya yerel görseli önizleyin, yüzde ya da piksel CSS'sini kopyalayın.

CSS Clip Path Oluşturucu: Poligon, Daire, Elips ve Inset: Temel görsel dosyasını değiştirmeden önizlemeyi seçilen şekle göre kırpar. Yüzde çıktısı, öğenin boyutlarını temel alır. Piksel çıktısı referans genişliğini ve yüksekliğini kullanır; görüntülenen önizleme ekranınıza sığacak şekilde ölçeklenir. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Geliştirici araçları
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
Kırpma yolu şekli deneme aracıYerel işleme

Tamamen tarayıcınızda çalışır

Numaralandırılmış bir noktayı sürükleyin, ok tuşlarını kullanın veya koordinatları girin. Aşağıdaki koordinatlar yüzdedir; piksel çıktısı referans boyutunu kullanır.

Nokta 1
Nokta 2
Nokta 3
Nokta 4
Nokta 5
Nokta 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Yüzde cinsinden şekiller öğeyle birlikte yeniden boyutlanır. Daire yüzdeleri normalleştirilmiş köşegeni; elips yüzdeleri genişlik ve yüksekliği kullanır. Piksel koordinatları referans boyutlarına sabitlenir.

CSS kırpma

MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . Kırpma, öğenin yerleşim kutusunu değiştirmeden görünür bölgeyi değiştirir.

Temel şekil koordinatları

W3C CSS Shapes Level 1, temel şekiller: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Çokgen koordinatları ve elips yarıçapları referans kutusuna göre hesaplanır; daire yüzdelerinde kutunun normalleştirilmiş köşegeni kullanılır. Hazır koordinatlar ve gradyan özgün çalışmalardır.

Nasıl kullanılır?

  1. Bir şekil ve ön ayar seçin, ardından referans boyutlarını belirleyin.
  2. Poligon noktalarını sürükleyin, ok tuşlarını kullanın veya koordinatları düzenleyin; diğer şekillerin kontrollerini ayarlayın.
  3. Yüzde veya piksel çıktısını seçin ve CSS'yi kopyalayın.

Gizlilik ve sınırlamalar

İsteğe bağlı görsel önizlemeleri cihazınızda kalır. Hiçbir şey yüklenmez.

İlgili araçlar

CSS gridKutu GölgesiFlexbox

Sık sorulan sorular

Sürüklemeden bir noktayı nasıl düzenlerim?

Numaralı tutamacına odaklanıp ok tuşlarını kullanın veya nokta listesinden X ve Y yüzdelerini girin. Poligonların en az üç noktası olmalıdır.

Bu araç kırpılmış bir görsel dışa aktarır mı?

Hayır. Bir HTML öğesi için CSS dışa aktarır. Yerel görsel yalnızca önizleme olarak kullanılır.

Daire yüzdeleri nasıl ölçülür?

CSS, daire yarıçapı referansı olarak normalleştirilmiş köşegeni, sqrt((width squared + height squared) / 2), kullanır. Elips yarıçapları genişlik ve yüksekliği ayrı ayrı kullanır.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez