Çokgen noktalarını gir, CSS clip-path kodunu ücretsiz oluştur. Şekli önizle ve polygon kodunu kopyala.
Polygon ile CSS şekli oluşturma
Her satıra yatay ve dikey yüzde koordinatını girin. Sol üst 0% 0%, sağ alt 100% 100% noktasıdır. Noktalar listedeki sırayla bağlanır, son nokta ilkine kapanır.
50; 0, 100; 100 ve 0; 100 noktaları yukarı bakan üçgen oluşturur. Üretilen clip-path: polygon(50% 0%, 100% 100%, 0% 100%); kodunu öğenizin CSS kuralına ekleyebilirsiniz.
Önizleme ile kod
Önizleme rengi yalnız şekli görmenizi sağlar, kopyalanan kod yalnız clip-path özelliğidir. Yüzdeler öğenin boyutlarına göre ölçeklenir; kare olmayan öğede şeklin oranı farklı görünebilir.
Kesişme ve kapsam
Noktaları çevre boyunca sıralamak basit çokgen üretir. Kenarlar kesişirse dolgu kuralına göre farklı bölümler oluşabilir. Araç otomatik geometri düzeltmesi yapmaz. Kırpma öğenin dış düzen kutusunu küçültmez. MDN clip-path belgesi tarayıcı davranışını açıklar.
Sık sorulan sorular
Kaç nokta gerekir?
En az 3, en fazla 100 nokta desteklenir.
Yüzde neye göre?
Öğenin genişlik ve yüksekliğine göre hesaplanır.
Arka plan rengi koda eklenir mi?
Hayır. Renk yalnız önizleme içindir.
Öğe çevresindeki boşluk küçülür mü?
Hayır. Görüntü kırpılır, yerleşim kutusu değişmez.