Softonic

CSS Üçgen Oluşturucu

Adım 1 / 2
Sonraki

Klasik CSS üçgeni aslında hiç de üçgen değildir; sıfır genişlikli ve sıfır yükseklikli, üç şeffaf kenarı ve tek bir renkli kenarı olan ve bu kenarların bir noktada buluştuğu bir öğedir. Bu oluşturucu, seçtiğiniz piksel değerinde boyutlandırılmış ve belirlediğiniz renkle doldurulmuş bu tanımı dört yönde (yukarı, aşağı, sol, sağ) üretir. Araç ipucu okları, konuşma balonları ve içerik haritası (breadcrumb) ayraçları için idealdir.

Kenar üçgeni nasıl oluşturulur?

  1. 1

    Bir yön seçin

    Yukarı, aşağı, sola veya sağa. Yön, hangi kenarın rengini alacağını ve hangi üç kenarın şeffaf kalacağını belirler.

  2. 2

    Boyutu ayarlayın

    Boyut değeri tüm kenar kalınlıkları için kullanılır. 60px'lık bir üçgenin genişliği 120px olur (yöne göre yüksekliği de olabilir).

  3. 3

    Doldurma rengini seçin

    Renk girişi yalnızca hex değerlerini destekler (örneğin `#10b981`); rgb, rgba veya adlandırılmış renkler desteklenmez. Renk yalnızca karşı taraftaki kenara uygulanır.

  4. 4

    CSS kuralını kopyalayın

    Elde edilen sonuç, eksiksiz bir `.triangle { ... }` kural kümesidir; bunu stil sayfanıza ekleyin ve gerekli yerlere `<div class="triangle"></div>` ekleyin.

Kenar hilesi neden işe yarar?

Bir kutunun width: 0 ve height: 0 değerleri olduğunda, dört kenarı tek bir merkez noktada buluşur. Kenarlar 45 derecelik açıyla birleştiği için her kenar aslında bir üçgendir; bunlardan üçü yalnızca görünmezdir. Bir kenarı renklendirin, o üçgeni görürsünüz.

Yön haritası

Yön Görünür kenar Şeffaf kenarlar
Yukarı border-bottom border-left, border-right, border-top
Aşağı border-top border-left, border-right, border-bottom
Sol border-right border-top, border-bottom, border-left
Sağ border-left border-top, border-bottom, border-right

Boyutlandırma matematiği

Üç şeffaf kenarın hepsi aynı boyut değerini paylaşır. Görünür kenar da aynı boyutu kullanır. Yani size: 60 olan bir üçgen için:

  • Genişlik = 2 × 60 = 120px (yukarı/aşağı üçgenler için)
  • Yükseklik = 2 × 60 = 120px (sol/sağ üçgenler için)

Asimetrik bir üçgen (daha dar taban, daha uzun uç) gerekiyorsa şeffaf kenarlara bir boyut, görünür kenara farklı bir boyut verin; örneğin border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; uzun ve dar, yukarı bakan bir üçgen oluşturur.

Bunun yerine ne zaman SVG’ye başvurmalı

  • Üç değil, birden fazla noktaya ihtiyacınız var, <polygon> kullanın.
  • Üçgen, üst öğeyle birlikte akıcı biçimde ölçeklenmeli, viewBox ve preserveAspectRatio kullanın.
  • Degrade dolgu, kontur (stroke) veya yuvarlatılmış uç istiyorsunuz, CSS kenarları bunların hiçbirini yapamaz.

Sık Sorulan Sorular

Yalnızca kenarlarla olmaz; kenar kalınlıkları % veya vw değerlerini iyi desteklenen bir biçimde kabul etmez. Akıcı ölçekleme gerekiyorsa SVG <polygon> öğesine geçin veya normal bir öğede clip-path: polygon(...) kullanın.

Kenarların birleştiği köşeyi yuvarlayamazsınız. Konturlu bir yola sahip bir SVG ile stroke-linejoin: round kullanın veya kenarı maskelemek için clip-path: polygon(...) ögesini hafif bir filter: drop-shadow ile birlikte kullanın.

Evet, bu en yaygın kullanım senaryosudur. Üçgeni araç ipucunun kenarına konumlandırın (absolute) ve dolgu rengini araç ipucunun arka planıyla eşleştirerek tek bir balon gibi görünmesini sağlayın.

Evet. Seçtiğiniz yön, boyut ve renk, CSS’yi oluşturması için sayfa isteğiyle birlikte sunucumuza gönderilir. Adım adım akışta bu değerler sayfa bağlantısında da taşınır. Kaydedilmezler.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur