CSS háromszög és nyíl generátor
Irányból, méretből és színből CSS szabályt ír, amely háromszöget vagy nyilat rajzol – nincs szükség képre.
CSS háromszög és nyíl generátor
Válassz irányat, szélességet és magasságot, valamint egy színt, és ez az eszköz megírja a CSS szabályt az alakzat rajzolásához – egy felfelé, lefelé, balra vagy jobbra mutató háromszög, vagy sarokháromszög egy szalagstílusú jelvényhez. Nincs képfájl az exportáláshoz és nincs extra jelölés hozzáadásához: az alakzat tiszta CSS, így tisztán skálázódik bármekkora méretnél és éles marad nagy pixelsűrűségű képernyőkön. Ez az alapja a legördülő szimbólumoknak, az akkordeon indikátoroknak, a szalagbetűeknek és a kis mutatónak a tooltip vagy chatbuborék tetején.
Két technika támogatott. A border trükk egy nulla méretű doboz ellenkező szegélyeit transzparenssé teszi – ez a klasszikus módszer, a legszélesebb böngésző-támogatással. A clip-path helyette sokszöggel rajzolja az alakzatot egy méretezett dobozra, amely könnyebben olvasható a fejlesztői eszközökben és animálható. Váltson közöttük a módszer opcióval.
Kapcsolja be a "Pszeudo-elemként használat" lehetőséget olyan szabályhoz, amely a ::after-re korlátozódik, abszolút pozícióval rögzítve a kiválasztott oldalhoz, készen áll egy relatív pozícióval rendelkező elemre – pontosan az, amire egy legördülő szimbólumnak vagy tooltip-mutatónak szüksége van. Helyette kapcsolja be a "Beszédbuborék csatolt nyíllal" lehetőséget, és az eszköz két szabályt generál: egy szegélyezett, lekerekített felszólítási dobozt és egy nyílfarokot, amely az irányba mutat – a chatbuborék vagy súgó-szöveg popover alakzata.
Minden a böngészőben fut: semmi, amit konfigurálsz, soha nem küldödik sehova. Másolja ki a CSS-t, töltse le .txt fájlként, vagy küldje el másik eszköz bemenetéhez a továbbfejlesztéshez.