Trình Tạo Hình Tam Giác
Bằng CSS
Dễ dàng tạo các hình tam giác CSS bằng thủ thuật "border trick".
Chọn hướng, kích thước, màu sắc và lấy mã code ngay tức thì.
Giới thiệu
Trình Tạo Tam Giác CSS sẽ giúp bạn tạo ra những hình tam giác sắc nét bằng kỹ thuật border trick kinh điển — khỏi cần phải dùng ảnh hay file SVG. Hỗ trợ đầy đủ 8 hướng (trên, dưới, trái, phải và 4 góc chéo).
Công cụ này sinh ra để làm đuôi bong bóng chat, mũi tên dropdown hay mấy họa tiết góc cạnh cho web. Mã code được sinh ra rất gọn, chỉ việc dán thẳng vào dự án. Và dĩ nhiên, tất cả chỉ diễn ra trên máy bạn, cực an toàn.
Cách sử dụng
Chọn hướng
Chọn một trong số các nút hình vuông để quyết định mũi tên tam giác của bạn sẽ chỉ về phương nào.
Chỉnh thông số
Sử dụng thanh trượt để chỉnh chiều dài, chiều rộng, và thay đổi màu sắc cho hợp với trang web của bạn. Bảng bên phải sẽ cập nhật ngay lập tức.
Lấy code
Nhấn "Copy CSS" hoặc "Copy HTML" để rước đoạn mã tuyệt hảo kia về dự án thôi.
Thuật ngữ
- Border Trick
- Một kỹ thuật của CSS tạo hình tam giác bằng cách xét chiều cao và chiều rộng của khối về 0, và tô màu lên độ dày của thuộc tính viền (border).
- transparent
- Là thuộc tính màu "trong suốt" của CSS. Nó được dùng để làm mờ đi các góc viền không mong muốn, từ đó chừa lại đúng 1 hình tam giác ở giữa.
- clip-path
- Một thuộc tính CSS hiện đại để cắt xén hình dạng của khối. Được xem là giải pháp thay thế cho Border trick nếu bạn muốn cắt những hình phức tạp hơn tam giác.
- Speech Bubble
- Hay gọi là bong bóng chat, bong bóng lời thoại. Bạn thường thấy có 1 cái hình tam giác nhỏ xíu ở góc khối chữ nhằm ám chỉ lời đó là do nhân vật nào đang nói.
- Pseudo-element (::before/::after)
- Các thẻ HTML "ảo" sinh ra bằng CSS. Người ta chuộng dùng cái này để gắn tam giác vào khối chính mà không cần khai báo lằng nhằng rác code HTML.
Hỏi đáp thường gặp
- Q.Nên dùng thủ thuật Border (Border trick) hay clip-path?
- Border trick hoạt động tốt trên các trình duyệt cũ. clip-path hỗ trợ tạo nhiều hình phức tạp hơn nhưng có thể không tương thích với một số trình duyệt đời cũ. Với các dự án hiện đại, bạn dùng cách nào cũng được.
- Q.Làm sao để tạo hình tam giác đều?
- Bạn có thể ước lượng bằng cách chỉnh tỉ lệ chiều rộng và chiều cao. Ví dụ với tam giác hướng lên, hãy cài đặt chiều rộng (width) ≈ chiều cao (height) × 2 để có kết quả gần giống tam giác đều nhất.
- Q.Dữ liệu của tôi có bị gửi lên máy chủ không?
- Không. Mọi thao tác tạo code đều diễn ra ngay trên trình duyệt máy bạn, đảm bảo an toàn tuyệt đối.
- Q.Làm sao để làm cho tam giác có kích thước linh hoạt (responsive)?
- Bạn chỉ cần copy mã CSS rồi thủ công thay đổi đơn vị px thành các đơn vị linh hoạt như em, rem, hoặc vw.
- Q.Công cụ có tạo được toàn bộ CSS cho bong bóng chat (speech bubble) không?
- Công cụ này chuyên trị phần "cái đuôi" tam giác. Để làm bong bóng chat, bạn thường sẽ dùng thuộc tính ::before hoặc ::after để nối tam giác này vào một khối văn bản.
Ứng dụng thực tế
Làm đuôi bong bóng Chat
Gắn tam giác nhỏ xíu vào góc của thẻ tin nhắn trong các khung trò chuyện (chat box).
Mũi tên menu Dropdown
Báo hiệu cho người dùng biết là menu này nhấn vào thì có thể xổ ra nội dung khác.
Tự tạo nút Select thủ công
Che lấp đi cái mũi tên mặc định siêu xấu của thẻ <select> và gắn mũi tên xịn xò này đè lên.
Nút qua bài Carousel
Mũi tên ấn sang trái sang phải trên các trình phát ảnh slide, nhẹ và gọn hơn dùng ảnh.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.