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

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Webpack Yapılandırma Oluşturucu

Kısa bir formdan webpack 5 için bir webpack.config.js oluşturun: entry, çıkış klasörü ve modu ayarlayın; ardından TypeScript, Babel, bir CSS yükleyici, HtmlWebpackPlugin ve bir dev sunucu açın.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

Araç diğer dillerde mevcuttur