Cách dùng Công cụ tạo tam giác CSS
- Nhấn chọn một hướng — lên, xuống, trái, phải hoặc một trong các góc.
- Nhập chiều rộng, chiều cao và màu sắc.
- Chọn Borders (hoạt động trên mọi trình duyệt, phù hợp cho mũi tên
::before/::after) hoặc clip-path (dễ đọc hơn, hỗ trợ gradient). - Sao chép CSS vào một phần tử hoặc pseudo-element.
Hai cách vẽ tam giác
Kỹ thuật border: một phần tử có chiều rộng và chiều cao bằng 0 chỉ hiển thị các đường viền, và mỗi đường viền là một tam giác gặp nhau ở giữa. Đặt ba đường viền thành trong suốt và một đường viền có màu, bạn sẽ có một mũi tên mà không cần hình ảnh. Kích thước được quyết định bởi độ rộng của border.
clip-path: một hộp thông thường với clip-path: polygon(50% 0, 100% 100%, 0 100%). Dễ đọc và dễ chỉnh kích thước hơn, đồng thời có thể tô bằng gradient hoặc hình ảnh.
Ví dụ mũi tên cho tooltip
.tooltip { position: relative; }
.tooltip::after {
content: "";
position: absolute; top: 100%; left: 50%; margin-left: -8px;
border: 8px solid transparent;
border-top-color: #111;
}Thêm hình dạng khác: Công cụ tạo Clip-path, Công cụ tạo Border Radius, Công cụ tạo SVG Blob.
Cũng được tìm dưới tên: tạo tam giác css, css triangle generator, mũi tên css tooltip, css triangle, css caret, mũi tên bong bóng thoại css, border tam giác css, clip-path tam giác.
Các công cụ dùng kèm tốt với Công cụ tạo tam giác CSS
- Tạo Box Shadow CSS — Xếp nhiều lớp bóng đổ, chỉnh độ lệch, blur, spread và độ trong suốt trên thẻ xem trước trực tiếp, rồi sao chép CSS box-shadow hoặc text-shadow.
- Trình tạo CSS Mask — Làm cho ảnh và khối nội dung mờ dần thay vì kết thúc đột ngột: làm mờ một cạnh, trên và dưới, cả bốn cạnh, vignette tròn hoặc đèn sân khấu, cắt phần tử thành các dải sọc — hoặc che phần tử bằng một hình dạng (ngôi sao, trái tim, lục giác, mũi tên…) với viền mềm, mờ dần mà clip-path không làm được.
- Trình tạo CSS Grid — Đặt số cột, số hàng và khoảng cách, sau đó kéo qua các ô để tạo các vùng như header, sidebar và main.
- Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
Câu hỏi thường gặp
Làm thế nào để tạo tam giác bằng CSS?
Đặt phần tử có width: 0 và height: 0, sau đó thiết lập border: với mũi tên hướng lên, để border trái và phải trong suốt và border dưới có màu. Công cụ này sẽ tự viết mã cho mọi hướng và kích thước.
Làm thế nào để thêm mũi tên vào tooltip?
Thêm một pseudo-element ::after với content: "", đặt vị trí ở cạnh của tooltip và áp dụng các border tam giác được tạo từ công cụ.
Nên dùng border hay clip-path để tạo tam giác?
Border hoạt động trên mọi trình duyệt và là cách chuẩn cho các mũi tên nhỏ trên pseudo-element; clip-path dễ chỉnh kích thước hơn và hỗ trợ gradient.
Tam giác CSS có thể có viền hoặc bóng đổ không?
Bạn có thể xếp chồng hai tam giác (một cái lớn hơn một chút với màu viền), hoặc dùng clip-path trên một phần tử bao kết hợp filter: drop-shadow() để tạo bóng đổ.
Tôi có thể cài Công cụ tạo tam giác CSS như một ứng dụng web và dùng khi không có mạng không?
Có. Công cụ tạo tam giác CSS là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.