İçeriğe atla
%100 yerel

CSS üçgen ve ok oluşturucu

Yön, boyut ve renkten CSS üçgen veya ok oluştur – görüntü dosyasına gerek yok.

Çıkış

CSS üçgen ve ok oluşturucu

Yön, genişlik ve yükseklik seç, renk seç ve bu araç şekli çizen CSS kuralını yazar – yukarı, aşağı, sol veya sağa bakan üçgen ya da şerit rozeti için köşe üçgeni. İhraç edilecek görüntü dosyası yok, eklenmesi gereken ekstra işaretleme yok: şekil saf CSS, bu nedenle herhangi bir boyutta temiz şekilde ölçeklenir ve yüksek yoğunluklu ekranlarda keskin kalır. Bu açılır gliflerin, akordeon göstergelerinin, şerit rozetlerinin ve araç ipucu veya sohbet balonlarının üzerindeki küçük işaretçinin temelidir.

İki teknik desteklenir. Border hilesi sıfır boyutlu kutunun zıt kenarlıklarını şeffaf yapar – klasik tarif, en geniş tarayıcı desteği. clip-path bunun yerine şekli bir polygon kullanarak çizen kutuya çizer, geliştirici araçlarında okunması daha kolay ve animasyonlu. Teknik seçeneği ile aralarında geçiş yapın.

"Sözde öğe olarak kullan" seçeneğini açın ::after için kapsamlı, seçtiğiniz tarafa mutlak konumlandırılmış bir kural için – tam olarak bir açılır glif veya araç ipucu işaretçisinin ihtiyaç duyduğu şey. Bunun yerine "Ekli ok ile konuşma balonları" seçeneğini açın ve araç iki kuralı birlikte üretir: kenarlı, yuvarlak bir açılır kutu ve yönü gösteren ekli bir ok kuyruk – sohbet balonunun veya yardım metni açılırının şekli.

Her şey tarayıcınızda çalışır: yapılandırdığınız hiçbir şey hiçbir yere gönderilmez. CSS'yi kopyala, .txt dosyası olarak indir veya başka bir aracın girdisine gönder.

FAQ

Hangi tekniği kullanmalıyım, border mu yoksa clip-path mi?
Border hilesi en geniş tarayıcı desteğine sahip ve çoğu CSS öğretici kitabında bulabileceğiniz standart tariftir. clip-path geliştirici araçlarında görünür bir sınırlayıcı kutuya sahip gerçek, boyutlu bir kutu oluşturur, bu da hata ayıklamayı veya animasyonu kolaylaştırır – yalnızca çok eski tarayıcıları desteklemeniz gerekiyorsa kullanın.
Kenar yönleri ile köşe yönleri arasındaki fark nedir?
Yukarı, aşağı, sol ve sağ o yöne işaret eden simetrik üçgen çizer – ok veya kaydırma göstergesinin şekli. Dört köşe seçeneği, bir kutunun bir köşesini dolduran dik açılı üçgen çizer – şerit rozeti veya kıvrılmış köşe efektinin şekli.
Sözde öğe seçeneği ebeveyn için konum kuralını da ekler mi?
Sözde öğeyi seçtiğiniz yön için doğru ofsetlere sahip mutlak konumlandırma ile konumlandırır. Ebeveyn öğenin o konumlandırmanın nispi olması için position: relative (veya başka bir konumlandırma bağlamı) öğesi olması gerekir.
Konuşma balonunu araç ipucu olarak kullanabilir miyim?
Evet. Kenarlı, yuvarlak bir açılır kutu artı seçtiğiniz yöne işaret eden ekli bir ok kuyruk oluşturur – bir araç ipucu veya yardım metni açılırının ihtiyaç duyduğu tam şekil. Genişliği, yüksekliği ve rengi tasarımınıza uyacak şekilde ayarlayın, ardından kutuyu kendi stil sayfanızda daha fazla stillendirin.
İnternete yüklenen bir şey var mı?
Hayır. CSS tamamen tarayıcınızda seçtiğiniz seçeneklerden oluşturulur – hiçbir şey sunucuya gönderilmez.