HTML
Anda boleh membuatnya dengan satu div. Senang mengadakan kelas untuk setiap kemungkinan arah.
CSS
Ideanya adalah kotak dengan lebar dan tinggi sifar. Lebar dan tinggi anak panah sebenar ditentukan oleh lebar sempadan. Dalam anak panah ke atas, misalnya, batas bawah berwarna sementara kiri dan kanan telus, yang membentuk segitiga.
.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
Lihat Animasi Pen untuk Menjelaskan Segitiga CSS oleh Chris Coyier (@chriscoyier) di CodePen.
Contoh
Dave Everitt menulis dalam:
Untuk segitiga sama sisi, perlu diperhatikan bahawa ketinggian adalah 86.6% dari lebar sehingga (sempadan-kiri-lebar + sempadan-kanan-lebar) * 0.866% = sempadan-bawah-lebar