HTML
Anda dapat membuatnya dengan satu div. Sangat menyenangkan memiliki kelas untuk setiap kemungkinan arah.
CSS
Idenya adalah kotak dengan lebar dan tinggi nol. Lebar dan tinggi panah sebenarnya ditentukan oleh lebar perbatasan. Dalam panah atas, misalnya, batas bawah diberi warna sedangkan kiri dan kanan transparan, 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 Pena untuk Menjelaskan Segitiga CSS oleh Chris Coyier (@chriscoyier) di CodePen.
Contoh
Dave Everitt menulis di:
Untuk segitiga sama sisi, perlu ditunjukkan bahwa tingginya adalah 86,6% dari lebar jadi (border-left-width + border-right-width) * 0.866% = border-bottom-width