HTML
Bạn có thể tạo chúng bằng một div duy nhất. Thật tuyệt khi có các lớp cho từng khả năng hướng.
CSS
Ý tưởng là một hộp không có chiều rộng và chiều cao. Chiều rộng và chiều cao thực tế của mũi tên được xác định bởi chiều rộng của đường viền. Ví dụ: trong một mũi tên lên, đường viền dưới cùng được tô màu trong khi bên trái và bên phải trong suốt, tạo thành hình tam giác.
.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; )Bản giới thiệu
Xem Hoạt ảnh bằng bút để giải thích các hình tam giác CSS của Chris Coyier (@chriscoyier) trên CodePen.
Ví dụ
Dave Everitt viết trong:
Đối với một tam giác đều, điều đáng chú ý là chiều cao bằng 86,6% chiều rộng, vì vậy (border-left-width + border-right-width) * 0,866% = border-bottom-width