CSS Üçgen ve Ok Üretici

Nasıl çalışır?

Sol panele üçgenin rengini yazın — HEX, RGB ve HSL yazımlarının üçü de tanınır ve kod her değişiklikte yenilenir. Yönü seçip genişlik ile yüksekliği ayarlayın: 24 piksel genişlik ve 16 piksel yükseklik, açılır menü ve ipucu balonu oku için yaygın bir başlangıçtır. Araç width: 0 ve height: 0 yazıp üçgeni kenarlık kalınlıklarıyla kurar; yukarı yönde 24 piksellik taban border-width'in sol ve sağ değerine 12'şer piksel olarak bölünür — tek sayılı genişlikte 12.5px gibi yarım değerler görürsünüz, tarayıcı bunları sorunsuz çizer. Köşe yönlerinde yalnız iki kenarlık kullanılır ve üçgen, kutunun o köşesini dik üçgen olarak doldurur; kurdele ve rozet kesimleri böyle yapılır. Sağ paneldeki kodu kopyalayıp kendi seçicinize yapıştırın ya da İndir düğmesiyle önizlemenin 1200×800 piksellik PNG halini alın.

Bu araç css triangle generator, css arrow generator, css tooltip oku aramalarıyla da biliniyor.

Border (kenarlık) hilesi nedir?

Border hilesi, CSS'te görsel dosyası kullanmadan üçgen çizmenin klasik yöntemidir. Genişliği ve yüksekliği sıfır olan bir kutuya kalın kenarlıklar verilir; kenarlıklar köşelerde 45 derecelik çaprazla buluştuğu için her biri üçgen biçimini alır. İstenen kenar renklendirilip komşu kenarlar transparent yapıldığında ekranda yalnız o üçgen kalır. Yöntem çok eskidir ve bugüne kadar çıkmış hemen her tarayıcıda aynı biçimde çalışır; açılır menü okları, ipucu balonları ve köşe kurdeleleri en yaygın kullanım yerleridir.

clip-path nedir?

clip-path, bir HTML öğesinin görünür alanını verilen geometrik yolla kırpan CSS özelliğidir; polygon(50% 0, 100% 100%, 0 100%) yazımı öğeyi üçgene kırpar. Border hilesinden farkı, kırpılan öğenin gerçek bir kutu olmasıdır: içine degrade, görsel ve metin konabilir, kenarları da çoğu tarayıcıda daha pürüzsüz boyanır. Karşılığında yol tanımını elle yazmak gerekir ve çok eski tarayıcılar özelliği tanımaz. Küçük ok için border hilesi, içerik taşıyan büyük şekil için clip-path pratikte doğru seçimdir.

Border üçgeni ile clip-path üçgeni arasındaki fark nedir?

Border üçgeni bir çizim numarasıdır: ortada içerik alacak gerçek bir alan yoktur, üçgen tek renkli kenarlık boyasından ibarettir. Bu yüzden yalnız düz renk taşır ama her tarayıcıda çalışır ve iki satır kodla işi bitirir — küçük ok, imleç ve köşe kesimi için idealdir. clip-path ise gerçek bir kutuyu üçgene kırpar: içine degrade, fotoğraf, hatta metin koyabilirsiniz ve çapraz kenar çoğu ekranda daha pürüzsüzdür; karşılığında koordinatları elle yazarsınız ve çok eski tarayıcılarda şekil düz dikdörtgene döner. Pratik kural: ok ve köşe işaretleri için border hilesi, içerikli ya da 100 pikseli aşan şekiller için clip-path.

Sıfır boyutlu kutu tuzağı: üçgen aslında bir kenarlık

Bu hilenin tamamı tek gözlemden çıkar: kalın kenarlıklı bir kutuda iki kenarlık köşede 45 derecelik çaprazla buluşur. Kutunun genişliğini ve yüksekliğini sıfıra indirirseniz geriye yalnız kenarlıklar kalır ve her kenarlık bir üçgene dönüşür. Bir kenarı boyayıp komşularını transparent yaptığınızda ekranda tek bir üçgen görünür. Kodda width: 0 ve height: 0 satırlarını silmeyin; kutu boyut kazanırsa üçgen bozulup yamuğa döner.

Bilinen sınırı da söyleyelim: çapraz kenar, tarayıcının kenarlık boyamasından geldiği için bazı ekranlarda hafif tırtıklı görünebilir ve üçgen büyüdükçe bu belirginleşir. Küçük ok ve köşe kesimlerinde fark edilmez; 100 pikseli aşan dekoratif üçgenlerde kenarı daha pürüzsüz çizen clip-path yolunu düşünün.

Hangi yön hangi işte kullanılır?

Üçgenin dili yönünden okunur; yaygın eşleşmeler şunlardır.

• İpucu (tooltip) balonunun altındaki ok → yukarı ya da aşağı, 12-16 piksel taban
• Açılır menü göstergesi → aşağı, 8-10 piksel: metnin yanında küçük durmalı
• İleri / geri, oynat düğmesi → sağa veya sola, genişlik ile yükseklik birbirine yakın
• Kurdele, rozet, köşe etiketi → köşe yönleri: üçgen kutunun köşesini dik üçgenle doldurur
• Konuşma balonu ucu → alt köşelerden biri, balonun zeminiyle aynı renk

Sık sorulanlar

Bu üçgen bir görsel mi, sayfaya dosya mı ekleniyor?

Hayır, dosya yoktur; üçgen tamamen CSS'tir. Sıfır boyutlu bir kutunun kalın kenarlıkları köşelerde çaprazla buluşur; bir kenarlık boyanıp komşuları saydam yapılınca geriye üçgen kalır. Kod olduğu için her ekran yoğunluğunda keskindir ve rengi tek satırla değişir.

Üçgeni konuşma balonuna ya da ipucuna nasıl eklerim?

En yaygın yol üçgeni balonun ::after sözde öğesine vermektir: balona position: relative, sözde öğeye position: absolute ve content: '' yazıp bu aracın ürettiği kenarlık satırlarını ekleyin; ok, left ve bottom gibi konum özellikleriyle balonun kenarına yerleştirilir. Böylece HTML'e fazladan öğe girmez.

Üçgenin çapraz kenarı neden tırtıklı görünüyor?

Çapraz çizgi, tarayıcının kenarlık birleşimini boyamasından çıkar ve kenar yumuşatması tarayıcıdan tarayıcıya değişir; özellikle büyük üçgenlerde basamaklanma göze çarpabilir. Küçük oklarda sorun olmaz. Büyük dekoratif üçgen gerekiyorsa clip-path: polygon(...) daha pürüzsüz kenar verir.

Girdiğim renk kodun neresine gidiyor?

border-color satırına: boyalı kenarın değeri sizin renginizdir, kalan üç kenar transparent yazılır. Yuvarlak köşe aracının tersine burada renk kodun parçasıdır, çünkü üçgeni gösteren şey kenarlığın kendisidir; rengi sonradan değiştirmek için o satırdaki değeri güncellemeniz yeterli.