CSS Triangle generátor

Mi ez az eszköz?

A CSS-nek nincs saját háromszög alakja, ezért a háromszögeket egy jól ismert megoldással építik: fogj egy nulla szélességű és nulla magasságú elemet, adj neki tömör keretet az egyik oldalon, és átlátszó kereteket a másik két szomszédos oldalon. Mivel a szomszédos keretek 45 fokos szögben találkoznak, az átlátszó keretek egy pontba futnak össze, így csak a színes keret marad látható háromszögként.

Ez az eszköz felépíti neked ezt a szerkezetet: válaszd ki, melyik irányba mutasson a háromszög, mekkora legyen, és milyen színű, majd nézd, ahogy az élő előnézet frissül, és másold ki a pontos CSS-t. Ugyanaz az alapul szolgáló trükk, amelyet a weben mindenhol használnak tiszta CSS nyilakhoz, tooltip-mutatókhoz és lenyíló nyilakhoz.

Forrás: CSS Backgrounds and Borders Module Level 3, W3C — ez definiálja, hogyan találkoznak a szomszédos keretélek egy szögben, ami az a mechanizmus, amelyre ez a háromszög technika épül.

Miért érdemes használni?

• Az élő előnézet megrajzolja a tényleges háromszöget, így megerősítheted a méretet, irányt és színt, mielőtt bármit is másolnál.
• Mind a négy alapvető irányt lefedi — fel, le, balra, jobbra — egyetlen vezérlővel.
• Nincs szükség képfájlokra vagy SVG-re — az így épített háromszög csak néhány sor CSS.
• Hasznos tooltip-mutatókhoz, lenyíló/harmonika nyilakhoz, egyedi listajelölőkhöz és egyszerű díszítő alakokhoz.
• Teljes egészében a böngésződben fut — semmi, amit beállítasz, nem kerül feltöltésre sehova.
• Ingyenes, nincs regisztráció, mobilon is működik.

Használati útmutató

1. Válassz irányt — a háromszög fel, le, balra vagy jobbra mutat attól függően, melyik oldal kapja a tömör keretet.
2. Állítsd be a méretet — ez szabályozza a border-width értéket mindhárom oldalon, és meghatározza, mekkorának tűnik a háromszög.
3. Válassz színt a látható (tömör) kerethez, amely a háromszög kitöltőszíne lesz.
4. Másold ki a generált CSS-t, és alkalmazd egy width: 0 és height: 0 elemre — egy üres <div> vagy egy pszeudoelem, mint a ::before/::after, egyaránt jól működik.

Példa

Bemenet

Irány: le · Méret: 60px · Szín: #ea580c

Kimenet

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

Egy lefelé mutató háromszöghöz a tömör szín a border-top-ra kerül, míg a bal és jobb keretek átlátszóak maradnak — az ellenkező oldal, mint amerre a háromszög mutat.

Miért számít a nulla szélesség és magasság

A trükk csak azért működik, mert az elemnek nincs saját tartalomdoboza — a width: 0 és height: 0 azt jelenti, hogy a teljes látható alak tisztán a középpontban találkozó keretekből ered. Ha az elemnek van bármilyen szélessége vagy magassága, a keretek már nem futnak össze egy tiszta pontba, és az alak eltörik. Ez az oka annak is, hogy a technika egyformán jól működik egy üres <div>-en vagy egy content: ""-vel rendelkező ::before/::after pszeudoelemen — nincs szükség tényleges tartalomra, csak a keretdobozra.

Az MDN CSS border tulajdonságról szóló dokumentációja lefedi, hogyan kombinálódik a border-width, border-style és border-color, beleértve azt is, hogyan találkoznak a szomszédos oldalakon lévő keretek átlósan (developer.mozilla.org/en-US/docs/Web/CSS/border) — ez a geometriai tény, amelyre ez az egész technika épül.

A CSS háromszögek gyakori felhasználásai

• Tooltip és beszédbuborék mutatók: egy kis háromszög (6–10px) egy lekerekített doboz szélén elhelyezve, a doboz hátterének megfelelő színnel.
• Lenyíló és select nyilak: egy kis lefelé mutató háromszög egy gomb vagy select elem mellett, jelezve, hogy egy menüt nyit meg.
• Harmonika/kibontás jelzők: egy jobbra mutató háromszög, amely lefelé fordul, amikor egy szekció ki van bontva.
• Egyedi listajelölők: egy kis jobbra mutató háromszög az alapértelmezett böngésző-jelölő helyett, egy jellegzetesebb listastílusért.
• Egyszerű banner/szalag sarkok: egy háromszög, amely egy kártya sarkába van beékelve, egy hajtott szalag effektet szimulálva.

Párosítás más CSS eszközökkel

A tooltip-mutatóként használt háromszögeknek általában egy hozzáillő árnyékra van szükségük, hogy vizuálisan összeilljenek a dobozzal, amelyhez kapcsolódnak — a Box Shadow generátor ezt az árnyékot állítja elő. A háromszögeken túlmutató UI alakokhoz (nyilak, csillagok, hatszögek) általában a clip-path a jobb modern megközelítés, nem további keret-trükkök egymásra rétegezése.

→ Box Shadow Generátor · Border Radius Generátor

Gyakori kérdések