Trình Tạo Tam Giác CSS là gì?
Trình Tạo Tam Giác CSS là một công cụ trực quan giúp bạn tạo tam giác CSS một cách nhanh chóng và chính xác. Thay vì tính toán thủ công các giá trị border hoặc tọa độ clip-path, chỉ cần chọn hướng của bạn, điều chỉnh kích thước và màu sắc, rồi sao chép mã được tạo.
Hai Phương Pháp CSS
Công cụ hỗ trợ hai phương pháp phổ biến để tạo tam giác CSS:
Border Trick
Phương pháp cổ điển sử dụng border trong suốt. Hoạt động trên tất cả các trình duyệt bao gồm cả những trình duyệt cũ. Phần tử có chiều rộng và chiều cao bằng không, với các border có màu tạo thành hình tam giác.
- Hỗ trợ trình duyệt tối đa
- Tương thích IE11
- Phần tử chiều rộng/chiều cao bằng không
Clip-path
Phương pháp hiện đại sử dụng clip-path: polygon(). Tạo ra mã sạch sẽ, dễ đọc hơn với các giá trị chiều rộng và chiều cao rõ ràng. Tam giác được tạo bằng cách cắt một hình chữ nhật có màu thành hình tam giác.
- Cấu trúc mã sạch sẽ
- Chỉ các trình duyệt hiện đại
- Kích thước rõ ràng
Khi Nào Sử Dụng Tam Giác CSS
Mũi Tên Tooltip
Dấu Mũ Dropdown
Các Phần Tử Trang Trí
Dấu Phân Cách Breadcrumb
Ruy Băng Góc
- 1. Trình Tạo Tam Giác CSS là gì?
- 2. Cách Sử Dụng
- 3. Các Tính Năng
- 4. Câu Hỏi Thường Gặp
- 4.1. Tôi nên sử dụng phương pháp nào — border trick hay clip-path?
- 4.2. Cách border trick của CSS tạo tam giác như thế nào?
- 4.3. Tôi có thể tạo tam giác đều không?
- 4.4. Tam giác hướng chéo được sử dụng để làm gì?
- 4.5. Tại sao tam giác của tôi trông mờ ở kích thước nhỏ?
- 4.6. Tôi có thể tạo hoạt ảnh cho tam giác CSS không?
Cách Sử Dụng
Chọn Một Hướng
Nhấp vào một trong 8 nút hướng trong lưới. Bốn hướng chính (trên, phải, dưới, trái) tạo tam giác tiêu chuẩn, trong khi bốn hướng chéo (top-left, top-right, bottom-left, bottom-right) tạo tam giác góc vuông.
Đặt Kích Thước
Sử dụng các thanh trượt Chiều Rộng và Chiều Cao hoặc nhập các giá trị chính xác (1–500px). Nhấp nút khóa để duy trì tỷ lệ khung hình 1:1 — thay đổi một kích thước sẽ tự động cập nhật kích thước khác.
Chọn Một Màu
Sử dụng bộ chọn màu cho bất kỳ màu tùy chỉnh nào, hoặc nhấp vào một trong các mẫu được đặt sẵn để chọn nhanh. Xem trước và xuất mã được cập nhật ngay lập tức.
Chọn Một Phương Pháp
Chọn giữa Border (border trick cổ điển) hoặc Clip-path (phương pháp polygon hiện đại). Cả hai đều tạo ra kết quả hình ảnh giống nhau nhưng với mã CSS khác nhau.
Sao Chép Mã
Bảng mã CSS hiển thị mã được tạo cho phương pháp đang hoạt động. Sử dụng bộ chuyển đổi tab để so sánh cả hai phương pháp. Nhấp Sao Chép CSS để sao chép mã vào clipboard của bạn.
Các Tính Năng
Hỗ Trợ 8 Hướng
Tạo tam giác chỉ theo bất kỳ hướng nào trong 8 hướng. Bốn hướng chính tạo tam giác cân, trong khi các hướng chéo tạo tam giác vuông hoàn hảo cho các trang trí góc.
Điều Khiển Kích Thước Chính Xác
Điều chỉnh chiều rộng và chiều cao độc lập từ 1 đến 500 pixel bằng cách sử dụng thanh trượt hoặc nhập số trực tiếp.
- Thanh trượt hoặc nhập trực tiếp
- Tùy chọn khóa tỷ lệ khung hình
- Phạm vi 1–500px
Tùy Chỉnh Màu Sắc
Chọn bất kỳ màu nào bằng bộ chọn màu gốc, hoặc nhanh chóng chọn từ 8 mẫu được đặt sẵn bao gồm các màu được sử dụng phổ biến nhất.
- Bộ chọn màu tùy chỉnh
- 8 mẫu được đặt sẵn
- Cập nhật xem trước ngay lập tức
Hai Phương Pháp CSS
Tạo mã bằng hai kỹ thuật CSS khác nhau:
- Border trick — Hỗ trợ trình duyệt tối đa
- Clip-path polygon — Mã hiện đại sạch sẽ
Xem Trước Trực Tiếp
Xem tam giác của bạn được hiển thị trong thời gian thực trên nền mẫu bàn cờ. Các tam giác lớn tự động được thu nhỏ để vừa với khu vực xem trước trong khi duy trì tỷ lệ chính xác.
Preset Tích Hợp
12 preset bao gồm các trường hợp sử dụng phổ biến với xem trước nhỏ hiển thị các hình dạng chính xác.
- Mũi tên tiêu chuẩn (4 hướng)
- Tooltip & dấu mũ dropdown
- Tam giác góc & cờ
Câu Hỏi Thường Gặp
Tôi nên sử dụng phương pháp nào — border trick hay clip-path?
Sử dụng border trick nếu bạn cần hỗ trợ các trình duyệt cũ (IE11 và cũ hơn). Sử dụng clip-path cho các dự án hiện đại nơi bạn muốn CSS sạch sẽ, dễ đọc hơn. Cả hai đều tạo ra kết quả hình ảnh giống hệt nhau.
Cách border trick 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 không, các border của nó gặp nhau tại các đường chéo. Bằng cách làm cho một số border trong suốt và một border có màu, chỉ khu vực hình tam giác của border có màu mới hiển thị, tạo thành hình tam giác.
Khái Niệm Chính: Tam giác không được vẽ — nó được tiết lộ bằng cách ẩn các phần của giao điểm border.
Tôi có thể tạo tam giác đều không?
Có. Để có tam giác trông giống tam giác đều chỉ lên hoặc xuống, hãy đặt chiều rộng khoảng 1,15× chiều cao (ví dụ: 115×100). Đối với 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.
- Xấp xỉ hình ảnh: chiều rộng = chiều cao × 1,15
- Độ chính xác toán học: chiều rộng = chiều cao × 2 / √3 (≈ 1,1547)
Tam giác hướng chéo được sử dụng để làm gì?
Tam giác chéo (top-left, top-right, bottom-left, bottom-right) tạo các hình dạng góc vuông. Chúng thường được sử dụng cho:
- Ruy băng và huy hiệu góc
- Các góc trang trang trí
- Hiệu ứng góc gập trên thẻ
- Các điểm nhấn thiết kế hình học
Tại sao tam giác của tôi trông mờ ở kích thước nhỏ?
Các tam giác rất nhỏ (dưới 10px) có thể trông mờ do kết xuất sub-pixel. Đây là hạn chế kết xuất của trình duyệt. Nếu có thể, hãy sử dụng kích thước lớn hơn một chút hoặc đảm bảo các kích thước dẫn đến các giá trị border toàn pixel.
Tôi có thể tạo hoạt ảnh cho tam giác CSS không?
Tam giác border-trick có thể tạo hoạt ảnh border-width và border-color. Tam giác clip-path cung cấp tính linh hoạt hơn — bạn có thể tạo hoạt ảnh cho các điểm polygon, màu nền, chiều rộng và chiều cao để chuyển đổi hình dạng mượt mà.
Hoạt Ảnh Hạn Chế
- Chiều rộng border
- Màu border
Hoạt Ảnh Đầy Đủ
- Điểm polygon
- Màu nền
- Chiều rộng & chiều cao
- Biến hình dạng
Chưa có bình luận nào. Hãy là người đầu tiên!