HTML
Du kan lage dem med en enkelt div. Det er hyggelig å ha klasser for hver retningsmulighet.
CSS
Ideen er en boks med null bredde og høyde. Den faktiske bredden og høyden på pilen bestemmes av bredden på grensen. I en pil opp, for eksempel, er den nedre kanten farget mens venstre og høyre er gjennomsiktige, som 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 penneanimasjonen for å forklare CSS-trekanter av Chris Coyier (@chriscoyier) på CodePen.
Eksempler
Dave Everitt skriver i:
For en likesidig trekant er det verdt å påpeke at høyden er 86,6% av bredden så (kant-venstre-bredde + kant-høyre-bredde) * 0,866% = kant-bunn-bredde