CSS Üçgen Üretici

Bu araç ne işe yarar?

CSS Üçgen Üretici, tek bir HTML öğesini ve border hilesini kullanarak resim olmadan üçgenler oluşturmanızı sağlar. Yön, boyut ve renk seçin; araç hazır CSS'i anında üretir ve canlı önizleme gösterir. Ok işaretleri, açılır menü göstergeleri ve konuşma balonu uçları yapan ön uç geliştiriciler için idealdir.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Border hilesi nasıl çalışır?

Üçgen, genişliği ve yüksekliği sıfır olan bir öğenin kalın kenarlıklarından oluşur. Üç kenarlık 'transparent' yapılır, dördüncüsü ise seçtiğiniz renkte bırakılır; bu görünür kenarlık üçgeni oluşturur. Örneğin yukarı bakan bir ok için sol ve sağ kenarlık şeffaf, alt kenarlık renkli olur. Boyut kaydırıcısı (10-120px) kenarlık kalınlığını, dolayısıyla üçgenin ölçeğini belirler. Çıktı tamamen vektörel olduğu için her ekran çözünürlüğünde net görünür.

Nerede kullanılır?

Üretilen üçgenleri açılır menü ve select okları, akordeon göstergeleri, sekme işaretçileri ve tooltip ile konuşma balonlarının sivri uçları için kullanabilirsiniz. Yön düğmeleriyle yukarı, aşağı, sol veya sağ üçgenler arasında geçiş yapın, renk seçiciyle tasarımınıza uyan tonu belirleyin. Üreteç dört kenarlık satırını da kopyalanabilir biçimde sunduğu için ::before veya ::after sözde öğelerine yapıştırmak saniyeler sürer.

Sıkça sorulan sorular

Üçgeni neden resim yerine CSS ile yapmalıyım?

CSS üçgenler ek HTTP isteği gerektirmez, dosya boyutu sıfırdır, her çözünürlükte keskin kalır ve rengi tek satırla değiştirebilirsiniz. Bu yüzden ikon ve gösterge gibi küçük şekiller için resimden daha verimlidir.

Üçgeni ::before veya ::after ile nasıl kullanırım?

Sözde öğeye 'content: "";' ve 'position: absolute;' verin, ardından üretilen 'width: 0; height: 0;' ve kenarlık satırlarını yapıştırın. Konumu üst öğeye göre 'top', 'left' gibi değerlerle ayarlayın.

İkizkenar yerine eğik üçgen yapabilir miyim?

Bu araç simetrik üçgenler üretir. Eğik veya dik açılı bir üçgen için üretilen koddaki şeffaf kenarlıklardan birinin kalınlığını diğerinden farklı bir değere elle ayarlamanız yeterlidir.