CSS Üçgen Üreteci

Klasik border yöntemini kullanarak saf-CSS üçgenler oluşturun — SVG yok, görsel yok. Sekiz yönden birini seçin, genişlik ve yüksekliği piksel cinsinden ayarlayın, bir renk seçin ve şekli tamamen saydam ve renkli kenarlıklardan oluşturan kendi kendine yeten .triangle { width: 0; height: 0; ... } kuralını kopyalayın.

1. Bir Yön düğmesine tıklayın (yukarı, aşağı, sol, sağ veya dört köşeden biri: top-left, top-right, bottom-left, bottom-right). 2. Renk seçici ile üçgenin Rengini seçin. 3. Genişlik (10–200px) ve Yükseklik (10–200px) kaydırıcılarını sürükleyin. 4. Kod panelinden oluşturulan CSS'i kopyalayın.

up / down / left / right, o yöne bakan, iki eşit saydam kenarlık ve bir renkli kenarlıktan oluşturulan eşit kenara yakın ikizkenar üçgenler üretir. top-left, top-right, bottom-left, bottom-right, bir renkli kenarlık ve bir saydam kenarlık kullanarak dik açılı köşe üçgenleri üretir. Çıktı, .triangle sınıfında her zaman width: 0 ve height: 0 ayarlar.