CSS Üçgen Oluşturucu
Kenarlık özelliklerini kullanarak web projeleriniz için piksel tabanlı CSS üçgen kodları oluşturun.
Aracı çalıştır
CSS ile üçgen şekilleri oluşturmak, modern web arayüzü geliştirmede araç ipuçları, açılır menü okları, akordeon sekmeleri ve dekoratif işaretçiler için sıkça başvurulan bir yöntemdir. Bu çevrim içi araç, CSS kenarlık tekniğini kullanarak piksel tabanlı üçgen kodları üretir. Genişlik ve yükseklik değerlerini sıfırlayarak kenarlık kalınlıkları üzerinden istenen geometrik formu hızlıca oluşturur. Araç arayüzünde yön, boyut ve renk parametrelerini belirleyebilirsiniz. Yön parametresi için yukarı, aşağı, sol, sağ veya köşe yönleri girilebilir. Boyut değerini piksel cinsinden girersiniz; çıktıda bu değere göre kenarlık kalınlıkları ayarlanır. Belirtilmeyen veya boş bırakılan alanlar varsayılan değerlerle doldurulur. Üretilen CSS çıktısında sıfır genişlik, sıfır yükseklik, düz kenarlık stili ve yön desenine göre düzenlenmiş piksel değerleri yer alır. Tanımlanmayan bir yön girerseniz araç, varsayılan olarak yukarı yönlü üçgen için kenarlık genişliklerini gösterir. Oluşan CSS kod bloklarını kopyalayıp stil dosyalarınıza ekleyebilir, arayüz bileşenlerinizde kullanabilirsiniz.
Kullanım
- İstediğiniz üçgen yönünü belirleyin (örneğin up, down, left veya right).
- Piksel cinsinden boyut değerini girin.
- İsteğe bağlı renk değerini kontrol edin veya varsayılan haliyle bırakın.
- Üret butonuna tıklayarak CSS kodunu oluşturun.
- Sonuç alanında listelenen CSS kurallarını kopyalayıp stil dosyanıza yapıştırın.
Örnekler
- Yön olarak 'up' ve boyut olarak 30 piksel seçildiğinde yukarı bakan üçgen için CSS kenarlık genişlikleri hesaplanır.
- Yön olarak 'right' ve boyut olarak 16 piksel girildiğinde sağa dönük ok oluşturan CSS kuralları listelenir.
SSS
CSS ile üçgen oluşturma mantığı nasıl çalışır?
Bir HTML elemanının genişlik ve yükseklik değerleri 0 piksel yapıldığında, kenarlıklar merkezde birleşir. Kenarlık kalınlıkları ve saydam kenarlık renkleri ayarlanarak üçgen geometrisi elde edilir.
Hangi yön seçenekleri desteklenir?
Yukarı (up), aşağı (down), sol (left), sağ (right) ve dört köşe yönü (top-left, top-right, bottom-left, bottom-right) desteklenir.
Desteklenmeyen bir yön metni girilirse ne olur?
Tanınmayan bir yön girerseniz araç, varsayılan olarak yukarı yönlü üçgen için kenarlık genişliklerini gösterir.