HTML
Jūs varat tos izveidot ar vienu div. Patīkami, ka ir nodarbības par katru virziena iespēju.
CSS
Ideja ir kaste ar nulles platumu un augstumu. Faktisko bultiņas platumu un augstumu nosaka apmales platums. Piemēram, augšupvērstā bultiņā apakšējā robeža ir krāsaina, savukārt kreisā un labā puse ir caurspīdīga, kas veido trīsstūri.
.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; )Demonstrācija
Skatiet Krāsa Koijera (@chriscoyier) pildspalvas animāciju, lai izskaidrotu CSS trīsstūrus vietnē CodePen.
Piemēri
Deivs Everits raksta:
Vienādmalu trīsstūrim ir vērts norādīt, ka augstums ir 86,6% no platuma, tātad (robeža-kreisais platums + malas-labais platums) * 0,866% = apmale-apakšējais platums