freetoolsY

CSS Üçgen Üretici

YeniGeliştirici

Sekiz yönde, kendi boyut ve renginizle border tabanlı CSS üçgeni üretin. Hazır kodu tek tıkla kopyalayın. Ücretsiz, görsel gerektirmez.

Yön

CSS kodu

.triangle {
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 80px solid #6366f1;
}

Üçgen yalnızca CSS kenarlıklarıyla çizilir — görsel veya SVG yok. Kodu stiliinize yapıştırın ve .triangle sınıfını uygulayın.

CSS üçgeni nasıl çalışır?

Üçgen, sıfır genişlik ve yüksekliğe sahip bir öğenin kenarlıklarıyla oluşturulur. Her kenar biri hariç şeffaf olur; görünür kenar üçgen şeklini oluşturur.

Hangi yönler destekleniyor?

Sekiz yön: yukarı, aşağı, sol, sağ ve dört çapraz. Her seçenek saf CSS üretir — görsel, SVG veya ek öğe gerekmez.

Boyut ve rengi değiştirebilir miyim?

Evet. Boyut kaydırıcısı taban boyutu piksel cinsinden, renk seçici ise üçgen rengini ayarlar. Üretilen kod ve önizleme anlık güncellenir.

Üretilen kodu nasıl kullanırım?

CSS bloğunu kopyalayıp stiliinize yapıştırın. Boş bir öğeye .triangle sınıfını verdiğinizde üçgen önizlemedeki gibi görünür.

Tüm tarayıcılarda çalışır mı?

Evet. Kenarlık tekniği tüm modern tarayıcılar tarafından desteklenir ve yıllardır CSS'te standart bir tekniktir — geriye dönük uyumluluk gerekmez.

Sıkça Sorulan Sorular

Benzer araçlar

Tüm araçları gör

Popüler araçlar

Tüm araçları gör

Oluşturduklarını paylaşmak mı istiyorsun? linklyhub.com ile kısa ve temiz bir bağlantı al.