HTML
Du kan göra dem med en enda div. Det är trevligt att ha lektioner för varje riktningsmöjlighet.
CSS
Tanken är en låda med nollbredd och höjd. Pilens faktiska bredd och höjd bestäms av kantens bredd. I en uppåtpil är till exempel den nedre kanten färgad medan vänster och höger är transparenta, vilket bildar triangeln.
.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 pennanimationen för att förklara CSS-trianglar av Chris Coyier (@chriscoyier) på CodePen.
Exempel
Dave Everitt skriver i:
För en liksidig triangel är det värt att påpeka att höjden är 86,6% av bredden så (kant-vänster-bredd + kant-höger-bredd) * 0,866% = kant-botten-bredd