Trình tạo tam giác CSS

Trick Border: Một Hack CSS 25 Tuổi Vẫn Hoạt Động

Kỹ thuật tam giác CSS khai thác cách thuật toán vẽ border CSS xử lý các border liền kề. Khi hai border gặp nhau ở một góc, ranh giới giữa chúng được vẽ dưới dạng một đường chéo ở góc chia đôi góc đó. Với một phần tử kích thước bình thường, góc nhỏ và đường chéo hầu như không nhìn thấy. Nhưng nếu bạn đặt chiều rộng và chiều cao của phần tử thành 0 và cho nó các border dày, các góc chiếm toàn bộ không gian trực quan: và những gì từng là một đường chéo vô hình trở thành cạnh có thể nhìn thấy của một tam giác. Làm ba trong bốn border trong suốt, để lại cái thứ tư có màu, và bạn đã vẽ một tam giác duy nhất chỉ ra xa khỏi phía có màu. Kỹ thuật này lần đầu tiên được tài liệu hóa rộng rãi vào khoảng 2007-2008 trong các bài viết CSS-tricks ban đầu của Chris Coyier và những người khác; nó đã là một mặt hàng chủ yếu của bộ công cụ nhà thiết kế web kể từ đó vì nó tạo ra một hình dạng sắc nét, có thể mở rộng, có thể tô-hex mà không cần SVG, không cần PNG, không cần yêu cầu HTTP bổ sung, và không cần CSS phức tạp. Toán học đơn giản nhưng phản trực giác (chiều cao của tam giác là border-width của bên có màu; cơ sở là gấp đôi border-width của bên trong suốt liền kề). Trình tạo này xử lý toán học để bạn có thể kéo các thanh trượt thay vì tính toán border-width.

Các Lựa Chọn Thay Thế Hiện Đại: clip-path, SVG, conic-gradient

Vào năm 2026, tam giác trick-border có đối thủ cạnh tranh. CSS clip-path với hàm polygon() (CSS Masking Module Level 1, hỗ trợ trình duyệt cơ bản kể từ 2017) cho phép bạn cắt bất kỳ phần tử nào thành một đa giác tùy ý: clip-path: polygon(50% 0, 100% 100%, 0 100%) vẽ một tam giác hướng lên trên bất kỳ phần tử nào. clip-path linh hoạt hơn (số đỉnh bất kỳ, không chỉ ba; hoạt động trên bất kỳ phần tử nào có nội dung bên trong, không chỉ div trống), kết hợp tốt hơn với các phép biến đổi và hoạt ảnh, và hỗ trợ các góc tròn thông qua hàm shape() mới hơn. SVG inline (<svg><polygon points="50,0 100,100 0,100"/></svg>) cho bạn quyền kiểm soát nhiều nhất: stroke, fill, gradient, hoạt ảnh thông qua các phần tử SMIL hoặc CSS, khả năng tiếp cận thông qua các phần tử <title>. conic-gradient có thể tạo ra các hình dạng tam giác thông qua các điểm dừng màu được đặt khéo léo, mặc dù điều này là một sự tò mò hơn là một mẫu thực tế. Tam giác trick-border vẫn là lựa chọn phù hợp cho trường hợp trang trí đơn giản (con trỏ tooltip, caret dropdown, đuôi bong bóng lời nói) nơi sự đơn giản và chi phí không quan trọng hơn tính linh hoạt; clip-path tốt hơn khi tam giác là một phần của hình dạng phức tạp hơn, khi bạn cần đặt văn bản bên trong, hoặc khi thiết kế có thể cần các góc tròn.

Nơi Tam Giác CSS Có Giá Trị

• Con trỏ tooltip và popover. Tam giác nhỏ kết nối bong bóng tooltip với phần tử neo của nó là trường hợp sử dụng phổ biến nhất: bạn có thể xây dựng nó dưới dạng phần tử pseudo tam giác CSS (::before hoặc ::after) trên tooltip, được đặt phía trên cạnh hướng đến neo.
• Đuôi bong bóng lời nói. Đuôi nhọn trên các bong bóng tin nhắn chat, thẻ bình luận, và callout trích dẫn. Cùng kỹ thuật như con trỏ tooltip, chỉ lớn hơn và được tạo kiểu để phù hợp với màu nền của bong bóng.
• Chỉ báo caret dropdown. Tam giác nhỏ hướng xuống trong các hộp chọn và các nút menu dropdown. Các phần tử <select> gốc có các caret được tạo kiểu OS; các dropdown tùy chỉnh được xây dựng từ <button> + popover cần caret riêng của chúng.
• Chỉ báo mở rộng/thu gọn accordion. Tam giác lật giữa hướng-phải (đã thu gọn) và hướng-xuống (đã mở rộng) khi bạn nhấp vào một phần accordion. Được hoạt ảnh hóa với một biến đổi xoay CSS.
• Dấu phân cách breadcrumb. Tam giác hướng-phải giữa các liên kết breadcrumb. Thường được xây dựng dưới dạng tam giác CSS với ::before.
• Trang trí banner và ribbon. Khía hình tam giác ở cuối banner sale hoặc thẻ, gấp góc trên huy hiệu "new", chevron ở dưới cùng phần hero hướng xuống để cuộn. Tất cả các tam giác màu đơn, tất cả là trick-border.
• Dấu phân cách trang trí. Một hàng tam giác nhỏ làm dấu phân cách phần, các overlay mẫu hình học, các phong cách retro.

Cân Nhắc Về Khả Năng Tiếp Cận

Tam giác CSS là trang trí trực quan thuần túy: chúng không có ý nghĩa ngữ nghĩa và không có sự hiện diện trong cây khả năng tiếp cận. Trình đọc màn hình không công bố chúng. Đối với việc sử dụng trang trí thuần túy (đuôi bong bóng lời nói, dấu phân cách breadcrumb), đây là hành vi đúng. Đối với các tam giác truyền đạt ý nghĩa (mũi tên hướng đến phần đang hoạt động, caret dropdown chỉ ra "nhấp để biết thêm"), ý nghĩa cần được truyền đạt thông qua các phương tiện khác: thuộc tính aria-expanded trên trigger dropdown, một nhãn văn bản có thể nhìn thấy, một aria-label trên nút. Đừng dựa vào tam giác CSS để truyền đạt trạng thái; coi nó như sự củng cố trực quan của trạng thái được truyền đạt ngữ nghĩa thông qua các thuộc tính khác. Nội dung phần tử pseudo CSS ::before và ::after thường không được đọc bởi các trình đọc màn hình, điều này phù hợp cho các hình dạng trang trí.

Các Loại Tam Giác Mà Trình Tạo Này Tạo Ra

• Lên / Xuống, chỉ lên hoặc xuống (cân)
• Trái / Phải, chỉ trái hoặc phải
• Trên-trái / Trên-phải, tam giác góc
• Dưới-trái / Dưới-phải, tam giác góc chỉ ngược
• Tỷ lệ tùy chỉnh, tỷ lệ chiều rộng/chiều cao có thể điều chỉnh cho các hình dạng không đều

Công cụ liên quan