Tạo Hình Tam Giác CSS

Công cụ tạo hình tam giác CSS dựng tam giác thuần CSS một cách trực quan, để bạn không bao giờ phải tự tính độ rộng border hay tọa độ clip-path bằng tay nữa. Chọn một hướng, đặt kích thước và màu, rồi sao chép đoạn CSS dán là chạy cho mũi tên tooltip, mũi nhọn dropdown, dấu chevron breadcrumb hay dải băng ở góc.

Công cụ hỗ trợ cả hai kỹ thuật quen thuộc. Thủ thuật border đặt chiều rộng và chiều cao của phần tử về 0 rồi tạo hình tam giác có màu từ các đường viền trong suốt, chạy được trên mọi trình duyệt. Clip-path dùng clip-path: polygon() trên một khối có màu để cho code gọn và dễ đọc hơn trên các trình duyệt hiện đại. Cả hai cho ra cùng một hình, và bạn có thể so sánh chúng cạnh nhau trước khi sao chép.

Riêng tư theo thiết kế: mỗi tam giác đều được tạo ngay trong trình duyệt của bạn. Không có thiết lập nào của bạn được tải lên máy chủ.

Cách Sử Dụng

Chọn một hướng

Nhấn một trong 8 nút trên lưới hướng. Bốn hướng chính (Lên, Phải, Xuống, Trái) tạo tam giác tiêu chuẩn, còn bốn hướng chéo (Trên trái, Trên phải, Dưới trái, Dưới phải) tạo tam giác vuông ở góc.

Đặt kích thước

Kéo thanh trượt Chiều rộng và Chiều cao hoặc nhập giá trị chính xác từ 1 đến 500 pixel. Bật Khóa tỉ lệ để giữ hai chiều bằng nhau — đổi chiều này thì chiều kia tự cập nhật theo.

Chọn màu

Dùng bảng chọn màu cho bất kỳ màu tùy chỉnh nào, hoặc nhấn một ô màu pha sẵn để chọn nhanh. Bản xem trước và đoạn code được tạo cập nhật ngay lập tức.

Chọn phương pháp và sao chép

Chuyển Phương pháp giữa Border và Clip-path, dùng các tab code để so sánh cả hai, rồi nhấn Sao chép CSS để gửi đoạn code thẳng vào clipboard. Nhấn Đặt lại bất cứ lúc nào để trở về mặc định.

Tính Năng

8 Hướng

Cho tam giác hướng Lên, Phải, Xuống hoặc Trái để có hình tiêu chuẩn, hoặc dùng bốn hướng chéo để tạo tam giác vuông ở góc.

Chỉnh Kích Thước Chính Xác

Đặt chiều rộng và chiều cao riêng từ 1 đến 500px bằng thanh trượt hoặc ô nhập số, và khóa tỉ lệ để thu phóng cân đối.

Tùy Chỉnh Màu Sắc

Chọn bất kỳ màu nào bằng bảng chọn màu của trình duyệt hoặc chọn từ 8 ô màu pha sẵn: chàm, đen, trắng, đỏ, lục, lam, hổ phách và tím.

Phương Pháp Border & Clip-path

Tạo code bằng thủ thuật viền trong suốt cổ điển để hỗ trợ tối đa, hoặc bằng clip-path polygon cho CSS hiện đại và gọn gàng hơn.

Xem Trực Tiếp

Thấy tam giác của bạn hiển thị theo thời gian thực trên nền ô bàn cờ, kèm thanh thông tin cho biết kích thước và hướng hiện tại.

Tự Thu Nhỏ Bản Xem Trước

Tam giác lớn tự động thu nhỏ vừa khít khung xem trước trong khi vẫn giữ đúng tỉ lệ.

12 Mẫu Có Sẵn

Bắt đầu từ các hình thường gặp — mũi tên đủ bốn hướng, mũi tên mảnh và rộng, mũi tên tooltip, mũi nhọn, tam giác góc và một lá cờ.

Hai Tab Code

Xem và so sánh đoạn CSS được tạo cho cả hai phương pháp bằng bộ chuyển tab; code cập nhật ngay khi bạn đổi bất kỳ thiết lập nào.

Sao Chép Một Nhấp

Sao chép đoạn CSS của phương pháp đang chọn vào clipboard chỉ với một nhấp, sẵn sàng dán vào tệp stylesheet của bạn.

Đặt Lại Về Mặc Định

Đưa hướng, kích thước, màu và phương pháp về giá trị ban đầu bất cứ lúc nào bằng nút Đặt lại.

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

Làm sao để vẽ tam giác trong CSS?

Hai cách phổ biến là thủ thuật border và clip-path. Với công cụ này bạn chỉ cần chọn hướng, kích thước và màu, rồi sao chép đoạn CSS — không phải tính toán bằng tay. Chọn phương pháp Border để hỗ trợ trình duyệt rộng nhất, hoặc Clip-path cho code hiện đại, gọn gàng hơn.

Thủ thuật border của CSS tạo tam giác như thế nào?

Khi một phần tử có chiều rộng và chiều cao bằng 0, bốn đường viền của nó gặp nhau theo các đường chéo. Bằng cách để một số viền trong suốt và giữ một viền có màu, chỉ phần hình tam giác của viền có màu đó còn hiển thị, và đó chính là hình tam giác.

Nên dùng thủ thuật border hay clip-path?

Dùng thủ thuật border khi bạn cần hỗ trợ những trình duyệt rất cũ, vì nó chạy được ở mọi nơi. Dùng clip-path cho các dự án hiện đại khi bạn muốn CSS ngắn, dễ đọc với chiều rộng và chiều cao rõ ràng. Cả hai cho ra tam giác giống hệt về mặt hình ảnh, nên bạn có thể chuyển Phương pháp để so sánh.

Làm sao để đổi hướng của tam giác?

Nhấn bất kỳ nút nào trong 8 nút hướng. Các hướng chính (Lên, Phải, Xuống, Trái) tạo tam giác tiêu chuẩn hướng theo phía đó, còn các hướng chéo (Trên trái, Trên phải, Dưới trái, Dưới phải) tạo tam giác vuông ở góc dùng cho dải băng và hiệu ứng góc gập.

Tôi có tạo được tam giác đều không?

Được. Để có tam giác trông đều khi hướng lên hoặc xuống, hãy đặt chiều rộng khoảng 1,15× chiều cao (ví dụ 115×100). Để có tam giác đều chính xác về mặt toán học, chiều rộng phải bằng chiều cao × 2 / √3.

Vì sao tam giác của tôi bị mờ ở kích thước nhỏ?

Tam giác rất nhỏ (dưới khoảng 10px) có thể trông mờ do hiển thị dưới điểm ảnh, đây là giới hạn của trình duyệt chứ không phải lỗi của code. Hãy dùng kích thước lớn hơn một chút, hoặc chọn kích thước cho ra giá trị viền là số pixel chẵn, để giữ cạnh sắc nét.

Tôi có thể tạo hiệu ứng động cho tam giác CSS không?

Có. Tam giác kiểu border có thể tạo hiệu ứng động cho border-width và border-color. Tam giác clip-path linh hoạt hơn — bạn có thể tạo hiệu ứng động cho các điểm polygon, màu nền, chiều rộng và chiều cao để chuyển hình mượt mà.