Határ- és határ-sugár - háromszögek és nyilak létrehozása css-en

Az "emeleten" gomb létrehozásáról szóló cikkemben gyakran megkértek egy nyílra mutató linket a képhez.

És javaslom a HTML-entitás használatát ▲ (a végén ez a nyíl ▲), vagy javaslom, hogy olvass el többet a CSS határoló tulajdonságáról.

Végül magam úgy döntöttem, hogy olyan cikkeket írok a trükkökkel, amelyeket a határ és a határ-sugár tulajdonságok segítségével forgathat.

A cikkben szereplő valamennyi példa (a képen kívül) CSS-ben van írva, így könnyedén megnézheti a forráskódot.

Határeszközök

Először is derítsük ki, hogy egyáltalán melyik határ képes. kivéve, hogy a szegélyt néhány ponton körvonalazzuk az elem köré.

1. A háromszög (nyíl)

Talán észrevetted, hogy ez a bejegyzés a "Site Acceleration" címkével van feltüntetve, a kérdés az, miért? A válasz abban a tényben rejlik, hogy rendszerint nyílvesszőket hoznak létre a weboldalon, a webmesterek képeket használnak, tapasztaltabb emberek spriteket vagy ikonikus betűtípusokat használnak.

De a Runetben jelenleg leggyakrabban az a változat létezik, amelyben minden egyes nyíl és az egyes elemek külön képeket használnak, és minden kép egy külön HTTP-kérés, ami mínusz a webhely letöltési sebességének. Minél kevesebb ilyen kérelem, annál nagyobb a letöltési sebesség. Ezért hoz létre nyilakat és mutatókat, ésszerűbb a CSS használatát (ezt először a Google-ban vettem észre).

Vegyünk egy példát.