HTML
Le puteți face cu o singură div. Este frumos să ai cursuri pentru fiecare direcție.
CSS
Ideea este o cutie cu lățime și înălțime zero. Lățimea reală și înălțimea săgeții sunt determinate de lățimea chenarului. De exemplu, într-o săgeată în sus, marginea de jos este colorată, în timp ce stânga și dreapta sunt transparente, ceea ce formează triunghiul.
.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
Vedeți Animația stiloului pentru a explica triunghiurile CSS de Chris Coyier (@chriscoyier) pe CodePen.
Exemple
Dave Everitt scrie în:
Pentru un triunghi echilateral, merită să subliniem că înălțimea este de 86,6% din lățime, astfel încât (margine-lățime-stânga + margine-lățime-dreapta) * 0,866% = margine-lățime-jos