CSS Üçgen (Triangle) ve Ok Oluşturucu
Border hilesi (border trick) ile CSS üçgenleri oluşturun.
Yön, boyut ve renk seçip anında kodu kopyalayın.
Hakkında
CSS Üçgen Oluşturucu, grafiklere veya SVG'lere ihtiyaç kalmadan, klasik border (kenarlık) hilesi kullanılarak CSS ile üçgen şekiller yaratılmasını sağlar. Toplam 8 farklı açı (yukarı, aşağı, sol, sağ ve dört çapraz) desteklenmektedir.
Konuşma balonları (speech bubbles), açılır paneller (dropdowns), yönlendirici menüler ve sayfa dekorasyonları için ideal bir çözümdür. Üretilen kodu projenize doğrudan kopyalayabilirsiniz. Tüm işlemler yerel olarak tarayıcınızda gerçekleştirilir.
Nasıl Kullanılır
Yönü Belirleme
Ekrandaki sol butondan üçgeninizin veya okunuzun sivri ucunun nereye bakacağını (örneğin yukarı-sol) seçin.
Ölçü ve Renk Düzenleme
Sürgülü menü vasıtasıyla genişlik ve yüksekliği, renk seçicilerden de arka plan ve üçgenin rengini ayarlayın. Önizleme canlı güncellenir.
Kodu Kopyalama
Dilerseniz wrapper (sarmalayıcı) opsiyonunu işaretleyin ve "CSS Kopyala" ya da "HTML Kopyala"na basarak kodu projenize aktarın.
Sözlük
- Border Trick (Kenarlık Hilesi)
- Kutunun genişliğini ve yüksekliğini 0 yapıp yalnızca kenarlıklara kalınlık ve saydam renk atayarak elde edilen CSS üçgen çizimi mantığıdır.
- transparent (Saydam)
- Şeffaflık anlamına gelir; üçgenin gizlenmesi gereken dış kenarlarını saydamlaştırarak göze sadece renkli çeperin yansımasını sağlar.
- clip-path
- CSS üçgenlerine alternatif daha yeni olan modern CSS kesim (maskeleme) yöntemidir ancak geriye dönük tarayıcı zafiyeti taşıyabilir.
- Speech Bubble (Konuşma Balonu)
- Sohbet veya bildirim ekranlarındaki klasik kutulardır. Kutunun sağ veya sol kuyruğu buradaki üçgen algoritması ile üretilir.
- Sahte Eleman (::before/::after)
- Orijinal kaynak değiştirmeden veya fazladan <div> eklemeden, CSS ile bir HTML kutusunun yanına üçgen kuyruk bağlamaya yarayan sahte tag komutlarıdır.
SSS
- S.Border tekniği (border trick) mi yoksa clip-path mi kullanmalıyım?
- Border tekniği çok daha eski tarayıcılarda bile sorunsuz çalışır. Clip-path ise daha karmaşık şekiller için iyidir ancak eski tarayıcılarda desteklenmeyebilir. Modern projeler için ikisi de tercih edilebilir.
- S.Eşkenar üçgen (equilateral) yapabilir miyim?
- Genişlik ve yükseklik oranlarını ayarlayarak yaklaşık bir eşkenar üçgen yapabilirsiniz. Örneğin yukarı bakan bir üçgen için genişliği (width) yüksekliğin (height) yaklaşık 2 katı ayarlayarak başlayabilirsiniz.
- S.Oluşturduğum üçgen şekilleri sunucuya kaydediliyor mu?
- Hayır. Tüm tasarım, hesaplama ve CSS kod üretimi yalnızca kullandığınız tarayıcı belleğinde yerel olarak gerçekleşir. Dışarıya hiçbir veri aktarılmaz.
- S.Responsive (duyarlı) bir üçgen yapabilir miyim?
- Evet. Aracın ürettiği piksel (px) değerlerini kodunuzda manuel olarak yüzdelik (%), em, rem veya vw gibi değerlere çevirerek ölçeklenebilir esnek üçgenler yaratabilirsiniz.
- S.Bununla konuşma balonu yapabilir miyim?
- Bu araç temel üçgen kodunu üretir. Konuşma balonunu elde etmek için genelde ana bir kutu yapılır ve ::before veya ::after sahte elemanlarıyla (pseudo-elements) üretilen bu üçgen kutunun kenarına "kuyruk" olarak eklenir.
Kullanım Senaryoları
Mesaj Balonları (Chat Speech Bubble)
Sohbet uygulamalarında mesaj barının profil fotoğrafına bakan o küçük zarif ucunu tasarlamak.
Akordiyon & Dropdown Okları
Sayfalardaki açılır/kapanır metin barlarındaki yönelimi belirten okların SVG'siz tasarımı.
Özel Select Okları
Tarayıcının standart select(seçici) okunu ezip, modern arayüze hizmet eden taze bir ok simgesi katmak.
Carousel Navigasyonu
Resim galerilerinde sola ya da sağa kaydırmayı yarayan, saf CSS yazılmış yön imleci ikon düğmeleri.