Skip to content
HTML.dk logo
  • Snippets
  • Tutorials
    • Lav din egen hjemmeside
    • Tjene penge på nettet
    • Guide til HTML
    • Guide til CSS
    • Artikler
  • Nyheder
  • Bidrag til sitet
Søgning

Sådan laver du en trekant med CSS

  • HTML.dk
  • 2. april 201912. april 2019
  • CSS snippets

I nogle situationer, kan man ønske at lave en trekant med CSS. Det kunne f.eks. være, hvis man vil lave en talebobbel, hvor trekanten kan sættes på siden, så den peger mod den som siger noget. Herunder finder du koden til en trekant. Du kan se en demo om, hvordan det egentlig fungere her.

Først skal vi lave lidt HTML

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

Og så lidt CSS

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid blue; 
}

Denne snippet blev indsendt af Kompli.dk


Kontaktformular skabelon
Farvekoder i HTML

Seneste artikler

  • Optimer dine daglige processer med et automatiseret lønsystem
  • Guide: Vælg den rigtige webshop løsning til din webshop!
  • Lækker, responsive modal-popup
  • Få det økonomiske overblik med et regnskabsprogram
  • Sådan skaber du det perfekte hjemmekontor

Mere fra HTML.dk

  • Alle snippets 24
  • Artikler 70
  • CSS snippets 13
  • HTML snippets 4
  • jQuery / JavaScript snippets 6
  • Nyheder 14
  • Scripts 1
  • Tutorials 7
  • Uncategorized 2
  • WordPress snippets 1

Kontakt

HTML.dk
Ceres Allé 7
Aarhus C
Skriv til os

Links

Om HTML.dk
Skriv til os!
Send et bidrag
Nyheder
Snippets

Nyt indhold fra HTML.dk

  • Optimer dine daglige processer med et automatiseret lønsystem
  • Guide: Vælg den rigtige webshop løsning til din webshop!
  • Lækker, responsive modal-popup
  • Få det økonomiske overblik med et regnskabsprogram
  • Sådan skaber du det perfekte hjemmekontor
  • Onlinelån: Alt du skal vide

HTML logo big