Drevet av FlexWeb AS

(+47) 45059000

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:

  1. Velg om pilen skal være på toppen, på høyre side, venstre side eller i bunnen
  2. Velg størrelse på pil
  3. Velg farge på bakgrunnen
  4. Velg bredde på kantlinje
  5. Velg farge på kantlinje.
  6. Sjekk at den er slik du vil ha den
  7. 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 🙂

CSS-pil-generator

Stilig, eller hva? – Har du tips til andre generatorer? Skriv det i kommentarfeltet under, eller i forumet 🙂

Enhanced by true google 404 wordpress plugin
Hopp til verktøylinje