HTML
Du kan lave dem med en enkelt div. Det er rart at have klasser for hver retningsmulighed.
CSS
Ideen er en kasse med nul bredde og højde. Den faktiske bredde og højde på pilen bestemmes af bredden af grænsen. I en pil op er for eksempel den nederste kant farvet, mens venstre og højre er gennemsigtige, hvilket danner trekanten.
.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; )Demo
Se penneanimationen for at forklare CSS-trekanter af Chris Coyier (@chriscoyier) på CodePen.
Eksempler
Dave Everitt skriver i:
For en ligesidet trekant er det værd at påpege, at højden er 86,6% af bredden, så (kant-venstre-bredde + kant-højre-bredde) * 0,866% = kant-bund-bredde