Viszont vannak dolgok, amikhez még kép se kell.

Navigációnál és UI kezelőfelületeknél gyakran láthatunk kicsi, egyszerű háromszögekből álló nyilakat. Ezeket elkészíthetjük képpel, esetleg valamely UTF8 karakterrel a html kódban. Előbbi megoldás minden színvariációra és állapotra külön képet igényel, utóbbival pozícinálási gondok lehetnek más-más böngészőkben, és megzavarhatja a felolvasó programokat – nem valami akadálymentes megoldás.

Mi más lehetőség marad? Ma már lehet vektorosan canvas illetve VML elemekre rajzolni, színezni, tetszőleges módon scriptelni különböző állapotokra, hogy nézzen ki az elem… de ez már érezhetően aránytalanul nagy ráfordítás ekkora feladatra.

Egy lehetőség maradt, amivel egyszerű, színes poligonokat rajzolhatunk és nem kell hozzá plugin, kép, de még javasript se: a css keret.

A böngészők egy elemet körbevevő, vastag keretet, azok találkozásánál egy sima, ferde egyenes mentén illesztik, ezzel elkerülve azt a problémás kérdést, hogy melyik keret hol lógjon túl az elem szélén és mennyire. A html és css vízszintes és függőleges világában ezek a ferde vonalak eléggé meglepően hatnak, ritkán is fordulnak elő, mivel csak eltérő színű és esetleg vastagságú kereteknél válnak láthatóvá.

Ha egy ilyen elemen a magasságot és a szélességet nullára vesszük, négy “nyilat” kapunk. Innen már csak a nemkívánatos kereteket kell áttetszővé állítani, és marad egy.

Apróságokra persze oda kell figyelni,pl. a pozicionálásnál, a html elem ilyenkor mindíg a nyíl csúcsa.

Előjött egy IE6 bug és annak körüljárása is, úgyfest IE6 nem kezeli rendesen a transzparens kereteket, kivéve, ha solid stílus helyett dotted -re állítjuk. Mivel ez a keret amúgy se látszik, tökmindegy mire állítjuk, és ha ezzel a trükkel az összes böngészőben jó, akkor miért ne.

Végül a css kód ennyi:

span.arrow {
	display: block;
	width: 0px;
	height: 0px;
 
	overflow: hidden;
 
	border-top: 20px dotted transparent;	
	border-right: 0px dotted transparent;
	border-bottom: 20px dotted transparent;	
	border-left: 20px solid green;
}

Ezáltal egy jól használható, testreszabható kis elemet kapunk, amit a mai egyszerű weboldalak és html alapú alkalmazások jól használhatnak.

Demo, és pár példa itt látható
Tesztelve: IE6, 7, 8, chrome, ff3, safari 4.

Előnyök:

• html-css, nincs plusz kép, kevesebb http lekérés
• gyors megjelenítés
• testreszabhatóbb
• mouseover adott a DOM-ból

Hátrányok:

• kicsit nagyobb html kód (vagy js futásidő, ha utólag teszed a DOM-ba, de ez elkerülhető)
• nem teljes a testreszabhatóság, pl nem lehet neki keretet rajzolni
• talán valahol megtöri a rétegszemléletet, plusz html kód a design-hoz
• IE alatt pixelesedés előfordulhat, ezt a nyil méretein finoman korrigálva javíthatjuk