Trình Tạo Tam Giác CSS

Công Cụ Này Là Gì?

CSS không có sẵn hình dạng tam giác riêng, nên tam giác được tạo ra bằng một mẹo khá nổi tiếng: lấy một phần tử có chiều rộng và chiều cao bằng không, cho một cạnh viền đặc và hai cạnh liền kề còn lại viền trong suốt. Vì các viền liền kề gặp nhau ở góc 45 độ, các viền trong suốt sẽ thu nhỏ dần thành một điểm, chỉ để lại viền có màu hiện ra dưới dạng hình tam giác.

Công cụ này xây dựng cấu trúc đó cho bạn: chọn tam giác nên chỉ theo hướng nào, kích thước bao nhiêu và màu gì, sau đó xem khung xem trước trực tiếp cập nhật và sao chép chính xác đoạn CSS. Đây cũng chính là thủ thuật cơ bản được dùng khắp nơi trên web để tạo mũi tên chỉ bằng CSS, con trỏ tooltip và ký hiệu mũi tên của menu xổ xuống.

Nguồn: CSS Backgrounds and Borders Module Level 3, W3C — định nghĩa cách các cạnh viền liền kề gặp nhau theo một góc, đây chính là cơ chế mà kỹ thuật tam giác này dựa vào.

Tại Sao Nên Dùng?

• Khung xem trước trực tiếp dựng hình tam giác thật, nên bạn có thể xác nhận kích thước, hướng và màu sắc trước khi sao chép bất cứ thứ gì.
• Bao phủ đủ bốn hướng cơ bản — lên, xuống, trái, phải — chỉ với một tùy chọn.
• Không cần file ảnh hay SVG — một tam giác tạo theo cách này chỉ là vài dòng CSS.
• Hữu ích cho con trỏ tooltip, ký hiệu mũi tên menu xổ xuống/accordion, dấu đầu dòng tùy chỉnh và các hình trang trí đơn giản.
• Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình được tải lên bất cứ đâu.
• Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

1. Chọn hướng — tam giác sẽ chỉ lên, xuống, trái hoặc phải tùy vào cạnh nào nhận viền đặc.
2. Đặt kích thước — giá trị này kiểm soát border-width trên cả ba cạnh và quyết định tam giác trông lớn cỡ nào.
3. Chọn màu cho viền hiển thị (viền đặc), màu này sẽ trở thành màu tô của tam giác.
4. Sao chép mã CSS đã tạo và áp dụng cho một phần tử có width: 0 và height: 0 — một <div> trống hoặc một pseudo-element như ::before/::after đều hoạt động tốt.

Ví dụ

Đầu vào

Hướng: xuống · Kích thước: 60px · Màu: #ea580c

Đầu ra

width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #ea580c;

Với tam giác chỉ xuống, màu đặc được đặt ở border-top trong khi viền trái và phải vẫn trong suốt — đó là cạnh đối diện với hướng mà tam giác chỉ tới.

Tại sao chiều rộng và chiều cao bằng không lại quan trọng

Thủ thuật này chỉ hoạt động vì phần tử không có content box riêng — width: 0 và height: 0 nghĩa là toàn bộ hình dạng hiển thị hoàn toàn đến từ các viền gặp nhau tại điểm trung tâm. Nếu phần tử có bất kỳ chiều rộng hay chiều cao nào, các viền sẽ không còn thu nhỏ thành một điểm gọn gàng và hình dạng sẽ bị vỡ. Đây cũng là lý do kỹ thuật này hoạt động tốt như nhau trên một <div> trống hay trên một pseudo-element ::before/::after với content: "" — không cần nội dung thực, chỉ cần hộp viền.

Tài liệu của MDN về thuộc tính CSS border giải thích cách border-width, border-style và border-color kết hợp với nhau, bao gồm cả cách viền của các cạnh liền kề gặp nhau theo đường chéo (developer.mozilla.org/en-US/docs/Web/CSS/border) — sự thật hình học mà toàn bộ kỹ thuật này dựa vào.

Các cách dùng phổ biến của tam giác CSS

• Con trỏ tooltip và bong bóng thoại: một tam giác nhỏ (6–10px) đặt ở cạnh của một hộp bo góc, cùng màu với nền của hộp.
• Mũi tên menu xổ xuống và select: một tam giác nhỏ chỉ xuống bên cạnh một nút hoặc phần tử select để cho biết nó sẽ mở ra một menu.
• Chỉ báo accordion/mở rộng: một tam giác chỉ sang phải, xoay để chỉ xuống khi một mục được mở rộng.
• Dấu đầu dòng danh sách tùy chỉnh: một tam giác nhỏ chỉ sang phải thay cho dấu đầu dòng mặc định của trình duyệt, tạo phong cách danh sách nổi bật hơn.
• Góc banner/dải ruy băng đơn giản: một tam giác nhét vào góc của thẻ để mô phỏng hiệu ứng dải ruy băng gấp.

Kết hợp với các công cụ CSS khác

Tam giác dùng làm con trỏ tooltip thường cần một bóng đổ phù hợp để hòa hợp về mặt hình ảnh với hộp mà nó gắn vào — Trình Tạo Box Shadow tạo ra bóng đổ đó. Đối với các hình khối giao diện phức tạp hơn tam giác (dấu mũ, ngôi sao, lục giác), clip-path thường là cách tiếp cận hiện đại tốt hơn thay vì chồng thêm nhiều thủ thuật viền.

→ Trình Tạo Box Shadow · Trình Tạo Border Radius

Câu Hỏi Thường Gặp