CSS Üçgen Oluşturucu

Sadece CSS ile bir üçgen oluşturmak için bir yön, boyut ve renk seçin, ardından kodu kopyalayın. Bu araç, sıfır genişlik/sıfır yükseklikte bir div ile şeffaf kenarlıklar kullanan klasik tekniği uygular — resim dosyası, SVG veya clip-path gerekmez; sadece herhangi bir tarayıcının anlayacağı birkaç kenarlık (border) tanımı yeterlidir.

Bu Araç Nedir?

CSS'te özel bir üçgen şekli yoktur, bu yüzden üçgenler iyi bilinen bir yöntemle oluşturulur: genişliği ve yüksekliği sıfır olan bir öğe alıp bir tarafına düz bir kenarlık, komşu diğer iki tarafına ise şeffaf kenarlıklar verirsiniz. Komşu kenarlıklar 45 derecelik bir açıyla birleştiğinden, şeffaf kenarlıklar bir noktaya doğru daralır ve geriye yalnızca renkli kenarlık bir üçgen olarak görünür halde kalır.

Bu araç bu yapıyı sizin için oluşturur: üçgenin hangi yöne bakacağını, ne kadar büyük olacağını ve hangi renkte olacağını seçin, ardından canlı önizlemenin güncellendiğini görün ve tam CSS'i kopyalayın. Bu, sadece CSS ile yapılan oklar, ipucu (tooltip) işaretçileri ve açılır menü okları için web genelinde kullanılan aynı temel numaradır.

Kaynak: CSS Backgrounds and Borders Module Level 3, W3C — bitişik kenarlıkların bir açıyla nasıl birleştiğini tanımlar; bu üçgen tekniğinin dayandığı mekanizma budur.

Neden Kullanmalısınız?

Canlı önizleme gerçek üçgeni gösterir; böylece herhangi bir şeyi kopyalamadan önce boyut, yön ve rengi doğrulayabilirsiniz.
Tek bir kontrolle dört temel yönü — yukarı, aşağı, sol, sağ — kapsar.
Resim dosyası veya SVG gerekmez — bu şekilde oluşturulan bir üçgen sadece birkaç satır CSS'dir.
İpucu işaretçileri, açılır menü/akordeon okları, özel madde işaretleri ve basit dekoratif şekiller için kullanışlıdır.
Tamamen tarayıcınızda çalışır — yaptığınız hiçbir ayar hiçbir yere yüklenmez.
Ücretsiz, kayıt gerektirmez, mobil cihazlarda çalışır.

Nasıl Kullanılır

Bir yön seçin — üçgen, düz kenarlığı hangi tarafın aldığına bağlı olarak yukarı, aşağı, sola veya sağa işaret eder.
Boyutu ayarlayın — bu, üç tarafın tümündeki border-width değerini kontrol eder ve üçgenin ne kadar büyük göründüğünü belirler.
Görünen (düz) kenarlık için bir renk seçin; bu, üçgenin dolgu rengi olur.
Oluşturulan CSS'i kopyalayın ve width: 0 ile height: 0 olan bir öğeye uygulayın — boş bir <div> veya ::before/::after gibi bir sözde öğe (pseudo-element) her ikisi de iyi çalışır.

Örnek

Giriş

Yön: aşağı · Boyut: 60px · Renk: #ea580c

Çıkış

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Aşağı bakan bir üçgen için düz renk border-top'a uygulanırken sol ve sağ kenarlıklar şeffaf kalır — bu, üçgenin işaret ettiği yönün tam tersindeki taraftır.

Sıfır genişlik ve yükseklik neden önemli

Bu numara yalnızca öğenin kendi içerik kutusu olmadığı için işe yarar — width: 0 ve height: 0, görünen şeklin tamamının merkez noktada birleşen kenarlıklardan oluştuğu anlamına gelir. Öğenin herhangi bir genişliği veya yüksekliği varsa, kenarlıklar artık temiz bir noktaya daralmaz ve şekil bozulur. Bu aynı zamanda tekniğin boş bir <div> üzerinde olduğu kadar content: "" içeren bir ::before/::after sözde öğesi üzerinde de eşit derecede iyi çalışmasının nedenidir — gerçek bir içerik gerekmez, sadece kenarlık kutusu yeterlidir.

MDN'nin CSS border özelliğiyle ilgili belgeleri, border-width, border-style ve border-color'ın nasıl birleştiğini ve komşu taraflardaki kenarlıkların çapraz olarak nasıl kesiştiğini (developer.mozilla.org/en-US/docs/Web/CSS/border) açıklar — bu tüm tekniğin dayandığı geometrik gerçektir.

CSS üçgenlerinin yaygın kullanımları

İpucu ve konuşma balonu işaretçileri: yuvarlatılmış bir kutunun kenarına yerleştirilen, kutunun arka planıyla eşleşen renkte küçük bir üçgen (6–10px).
Açılır menü ve select okları: bir menü açtığını göstermek için bir düğmenin veya select öğesinin yanında küçük, aşağı bakan bir üçgen.
Akordeon/genişletme göstergeleri: bir bölüm genişletildiğinde aşağı dönen, sağa bakan bir üçgen.
Özel liste madde işaretleri: daha belirgin bir liste stili için tarayıcının varsayılan madde işareti yerine sağa bakan küçük bir üçgen.
Basit banner/kurdele köşeleri: katlanmış bir kurdele efekti oluşturmak için bir kartın köşesine sıkıştırılmış bir üçgen.

Diğer CSS araçlarıyla eşleştirme

İpucu işaretçisi olarak kullanılan üçgenler genellikle bağlı oldukları kutuyla görsel olarak uyum sağlaması için eşleşen bir gölgeye ihtiyaç duyar — Kutu Gölgesi Oluşturucu bu gölgeyi üretir. Üçgenlerin ötesine geçen arayüz şekilleri için (şevronlar, yıldızlar, altıgenler), daha fazla kenarlık numarası üst üste eklemek yerine genellikle clip-path daha iyi bir modern yaklaşımdır.

→ Kutu Gölgesi Oluşturucu · Kenar Yarıçapı Oluşturucu

Sıkça Sorulan Sorular

Renk neden üçgenin işaret ettiği yönün tersindeki kenarlığa uygulanır?

Öğeyi ortada birleşen dört üçgen kenarlık parçasından oluşan bir elmas gibi düşünün. Düz renk üst kenarlıktaysa, görünen şekil üst yarıyı kaplar — ancak öğenin boyutu sıfır olduğundan, bu 'üst yarı' üçgeni aslında öğenin var olmayan içerik kutusunun bulunacağı yere, yani aşağıya işaret eder. Aynı mantık dört yön için de geçerlidir.

Mükemmel bir ikizkenar üçgen olmayan bir üçgen yapabilir miyim?

Evet — bu araç basitlik için her zaman simetrik bir üçgen oluşturur, ancak kopyalanan CSS'i daha sonra elle düzenleyebilirsiniz. İki şeffaf border-width'i eşit olmayan yapmak üçgeni bir tarafa doğru çarpıtır; düz kenarlığın genişliğini bağımsız olarak değiştirmek, taban genişliğini etkilemeden yüksekliğini değiştirir.

Bu teknik tüm tarayıcılarda çalışır mı?

Evet — kenarlığa dayalı üçgen numarası, en erken CSS uygulamalarından beri var olan temel border-width, border-style ve border-color desteğine dayanır. Mevcut en geniş uyumluluğa sahip saf CSS şekil tekniklerinden biridir.

Kenarlık numarası yerine ne zaman clip-path kullanmalıyım?

Kenarlık numarası, ek özellik gerektirmediği ve her yerde çalıştığı için özellikle basit üçgenler için idealdir. Beşgenler, yıldızlar, çentikli oklar veya hâlâ bir arka plan görüntüsü göstermesi gereken bir kutuda çapraz kesimler gibi daha karmaşık bir şey için clip-path daha esnektir ve üzerinde düşünmek daha kolaydır, ancak eski tarayıcı desteği daha dardır.

Üçgenin içine metin veya simge koyabilir miyim?

Doğrudan değil — üçgenin öğesi sıfır genişlik ve yükseklikte olduğundan, herhangi bir şeyi tutacak bir içerik kutusu yoktur. Bir üçgeni metin veya simgeyle birleştirmek için, onu mutlak konumlandıran bir üst öğe üzerinde dekoratif bir sözde öğe (::before/::after) olarak kullanın, ardından üst öğenin gerçek içeriğini ayrı olarak biçimlendirin.