CSS sınır üçgeni nasıl çalışır?

Genişlik 0 ve yükseklik 0 ile ilgili bir element hala 45 derece digonal denizlerle buluşmaktadır. Bir sınırı renklendirmek ve diğer üç şeffaf yapmak tek bir triangular biçiminden, renkli tarafının aksine.

Neden köşe üçgenleri doğru dikiliyor?

Diagonal yönler sadece iki bitişik sınırları kullanır, bu yüzden üçgenin bu sınırların buluştuğu bir kare köşesi vardır. Her iki taraf da aynı sınır genişliğinden gelir, köşe üçgenleri her iki bacak için genişlik değerini kullanır ve ayrı yüksekliği görmezden gelir.

Üçgenin boyutunu nasıl değiştiririm?

Genişleme ve yükseklik ayarlama: Daha büyük renkli bir sınır üçgeni bu yönde daha uzun kılarken, şeffaf sınırlar üssün genişliğini belirler. Araç, kaydırıcıları sürüklediğiniz gibi sizin için sınır değerlerini güncellemektedir.

CSS Üçgen Jeneratör

Sınır hilesi ile saf-CSS üçgenleri - bir yön, boyut ve renk seçin, sonra CSS'yi kopyalayın.

Direction

Width

Height

Color

Diagonal (corner) triangles are right-angled and ignore the separate height value, using the width for both sides.

Preview

CSS

Was this tool helpful?

Send output to:

How to use CSS Triangle Generator

Bir yön seçin - aşağı, sol, sağ veya dört köşeden biri.
Üçgenin üssünü ve noktasını kontrol etmek için genişliği ve yüksekliği ayarlayın.
Üçgenin görünür tarafını için dolgu rengini seçin.
Genişleme, yükseklik ve sınır bildirimlerini kopyalamak için CSS'yi kopyalayın.

What is CSS Üçgen Jeneratör?

Saf-CSS üçgeni, sıfır büyüklükte bir element kalın sınırları vererek yapılır ve sonra bu sınırların üçünü trans ebeveyn yapar. Renkli sınır şeffaf olanları karşılar, digonal denizler bir üçgen oluşturur - hiçbir görüntü veya SVG gerekli değildir.

Bu jeneratör sizin için matematiği idare eder: sekiz yönden birini seçin (dört taraf artı dört doğru köşe), genişliği, height ve renk, ve sonucu kopyalayın genişlik: 0; yükseklik: 0; ve border-* Açıklamalar doğrudan tarzınıza girin.

FAQ

CSS sınır üçgeni nasıl çalışır?: Genişlik 0 ve yükseklik 0 ile ilgili bir element hala 45 derece digonal denizlerle buluşmaktadır. Bir sınırı renklendirmek ve diğer üç şeffaf yapmak tek bir triangular biçiminden, renkli tarafının aksine.
Neden köşe üçgenleri doğru dikiliyor?: Diagonal yönler sadece iki bitişik sınırları kullanır, bu yüzden üçgenin bu sınırların buluştuğu bir kare köşesi vardır. Her iki taraf da aynı sınır genişliğinden gelir, köşe üçgenleri her iki bacak için genişlik değerini kullanır ve ayrı yüksekliği görmezden gelir.
Üçgenin boyutunu nasıl değiştiririm?: Genişleme ve yükseklik ayarlama: Daha büyük renkli bir sınır üçgeni bu yönde daha uzun kılarken, şeffaf sınırlar üssün genişliğini belirler. Araç, kaydırıcıları sürüklediğiniz gibi sizin için sınır değerlerini güncellemektedir.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Triangle Generator on Wikipedia·Developer Tools on Wikipedia·CSS Triangle Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-03

CSS Üçgen Jeneratör

Something went wrong

How to use CSS Triangle Generator

What is CSS Üçgen Jeneratör?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts