HTML
Galite juos padaryti su vienu div. Malonu turėti užsiėmimus kiekvienai krypčiai.
CSS
Idėja yra dėžutė, kurios plotis ir aukštis yra nulis. Faktinį rodyklės plotį ir aukštį lemia kraštinės plotis. Pavyzdžiui, rodyklėje aukštyn apatinė kraštinė yra spalvota, o kairė ir dešinė yra skaidrios, o tai sudaro trikampį.
.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; )Demonstracija
Peržiūrėkite Chriso Coyierio (@chriscoyier) „Pen Animation to CSS Triangles“ paaiškinimą „CodePen“.
Pavyzdžiai
Dave'as Everittas rašo:
Dėl lygiakraščio trikampio verta atkreipti dėmesį į tai, kad aukštis yra 86,6% pločio, taigi (kraštas-kairė-plotis + kraštas-dešinė-plotis) * 0,866% = kraštas-apačia-plotis
