Tại sao lập trình viên tạo hình Tam giác bằng CSS Border?

Trong CSS không có thuộc tính nào tên là triangle. Để tạo hình tam giác thuần CSS, một thủ thuật kinh điển là tận dụng thuộc tính border. Khi một phần tử có width: 0 và height: 0, nhưng các cạnh viền (border) lại rất dày, các góc giao nhau của đường viền sẽ tự động cắt chéo nhau (miter). Bằng cách cho 3 cạnh viền có màu trong suốt (transparent) và chỉ giữ màu 1 cạnh viền còn lại, ta sẽ thu được một hình tam giác hoàn hảo!

Ứng dụng của tam giác CSS (CSS Triangle) trong thực tế

Sử dụng tam giác thuần CSS thay vì file ảnh (SVG/PNG) giúp mã nguồn nhẹ hơn, không tốn thêm HTTP request và có thể dễ dàng đổi màu bằng CSS khi Hover. Các ứng dụng phổ biến:

• Tooltip Arrows: Mũi tên nhỏ nhô ra trên các hộp thoại chú thích (Tooltip / Popover).
• Speech Bubbles: Mũi tên trỏ ra ở đuôi bong bóng chat (giống Zalo, Messenger).
• Breadcrumbs / Ribbons: Các dải ruy băng đuôi nheo hoặc thanh điều hướng.
• Dropdown Menus: Mũi tên chỉ xuống báo hiệu một menu thả xuống.

Công cụ tự động tạo CSS Triangle đa hướng

Cấu hình bằng tay các cạnh Top, Right, Bottom, Left để ra hình tam giác đúng hướng và đúng tỷ lệ rất dễ nhầm lẫn. Công cụ của chúng tôi giải quyết vấn đề này trong 3 giây:

1. Chọn hướng mũi tên (Lên, Xuống, Trái, Phải, Góc chéo).
2. Kéo thanh trượt để thay đổi Chiều rộng và Chiều cao của tam giác.
3. Chọn màu sắc phù hợp với hộp thoại Tooltip của bạn.
4. Copy đoạn mã CSS border-width và border-color thần thánh.