CSS generator: Lage div-tag med pil-design
Noen verktøy er bare geniale, og dette er et slikt verktøy jeg kom over slik plutselig. Det gjør det veldig enkelt for deg å lage CSS-baserte div-tags med pil, uten å bruke bildefiler i det hele tatt. Fordelen er klar: Enkelt å endre, raskt å laste og enkelt å bruke 🙂
Link ligger nederst saken.
Du kan enkelt lage piler generert med CSS, og legge inn tekster som i en vanlig div.
Slik bruker du den:
- Velg om pilen skal være på toppen, på høyre side, venstre side eller i bunnen
- Velg størrelse på pil
- Velg farge på bakgrunnen
- Velg bredde på kantlinje
- Velg farge på kantlinje.
- Sjekk at den er slik du vil ha den
- Kopier CSS og bruk den på din div
Dersom du ikke kan CSS så godt, så bruker du CSS-koden slik:
I HTML-koden: Opprett en <div> som du tillegger en CSS-klasse til som heter “arrow-box”. Altså slik:
<div class=”arrow_box”>Din tekst her </div>
Så limer du inn CSS-koden i ditt HTML-dokument, eller legger det i CSS-filen.
Dersom du legger det inn i HTML dokumentet, legg det før </head> og la det begynne med <style> og slutte med </style>.
Slik:
<style>
.arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-bottom-color: #88b7d5; border-width: 30px; left: 50%; margin-left: -30px; } .arrow_box:before { border-bottom-color: #c2e1f5; border-width: 36px; left: 50%; margin-left: -36px; }
</style>
Da skal det bare være å skrive inn teksten du vil ha i din div-tag, og resten gjør seg selv 🙂
Stilig, eller hva? – Har du tips til andre generatorer? Skriv det i kommentarfeltet under, eller i forumet 🙂