CSS Üçgen Oluşturucu
border hilesiyle 8 yönde CSS üçgeni oluşturun: canlı önizleme ve clip-path çıktısı
border neden üçgen oluşturur
width:0 ve height:0 olan bir öğenin içerik kutusu yoktur, bu yüzden dört kenarlığı tek bir noktada buluşur ve tarayıcı her birini bir kama olarak çizer.
Üçünü transparent yaparsanız geriye tek bir üçgen kalır. Tabanı komşu iki kenarlık kalınlığının toplamına, yüksekliği ise o kenarlığın kendi kalınlığına eşittir.
Bu nedenle yukarı bakan bir üçgende sol ve sağ kenarlıklar genişliğin tam yarısı olur ve öğenin kenarlık kutusu tam olarak genişlik çarpı yükseklik olur.
RTL uyarısı
border-left ve border-right fizikseldir: sayfa RTL olduğunda yer değiştirmezler, bu yüzden LTR düzende sağa bakan bir üçgen RTL düzende de sağa bakar.
Üçgen bir ileri oku veya açılır menü işareti ise mantıksal özellikleri açın: çıktı border-inline-start ve border-inline-end kullanır ve metin yönüyle birlikte aynalanır. Sabit bir kenara sabitlenmiş ipucu oku için fiziksel sürümü koruyun.
CSS Üçgen Oluşturucu hakkında
CSS üçgeni aslında bir şekil değil, sıfır boyutlu bir kutunun tek bir kenarlığıdır. width ve height sıfır olunca dört kenarlık tek bir noktada buluşur ve tarayıcı her birini bir kama olarak boyar; üçünü transparent yaparsanız geriye tek üçgen kalır. Bu yüzden 80 piksel genişliğinde yukarı bakan bir üçgende sol ve sağ kenarlıklar 80 değil, 40 piksel olmalıdır.
CSS Üçgen Oluşturucu nasıl kullanılır
- 1
3×3 ızgaradan bir yön seçin: dört düz ok ve dört köşe üçgeni.
- 2
Genişlik ve yüksekliği kaydırıcı veya sayı kutusuyla ayarlayın ya da eşkenar üçgen (köşelerde 45 derece) için oran kilidini işaretleyin.
- 3
Rengi seçiciden alın veya hex kodunu yazın, isterseniz çıktıdaki seçici adını değiştirin.
- 4
Ok RTL sayfalarda aynalanmalıysa mantıksal özellikleri açın.
- 5
border kodunu veya yanındaki clip-path sürümünü kopyalayın.
Sıkça sorulan sorular
CSS üçgenim neden görünmüyor?
Neredeyse her zaman öğenin hâlâ bir genişliği ve yüksekliği olduğu için. Üçgenin boyutu yalnızca kenarlık kalınlıklarından gelir; gerçek boyutlar verirseniz üçgen yerine köşeleri pahlanmış bir kutu elde edersiniz. Ayrıca kullanılmayan kenarlıklar kaldırılmış değil, transparent olmalıdır.
CSS üçgenine degrade veya çerçeve eklenebilir mi?
Hayır. Üçgen bir kenarlık rengiyle boyanır, bu yüzden tek bir düz renk kabul eder ve border-radius üzerinde etkisizdir. Degrade veya görsel için clip-path çıktısını kullanın; çerçeveli üçgen içinse biraz daha büyük bir üçgenin önüne küçüğünü yerleştirin.
Üçgen RTL sayfalarda ters döner mi?
Varsayılan çıktıda dönmez, çünkü border-left ve border-right fizikseldir ve asla yer değiştirmez. Mantıksal özellikleri açarsanız araç border-inline-start ve border-inline-end üretir; bunlar metin yönüyle birlikte aynalanır.
Bu aracın sınırları neler?
Sekiz sabit yönde, 300 piksele kadar düz tek renkli üçgenler üretir. Serbest açılar, yuvarlatılmış uçlar ve döndürülmüş üçgenler kapsam dışıdır; bunlar için SVG veya CSS transform gerekir.