Softonic

Trình tạo tam giác CSS

Bước 1 / 2
Tiếp theo

Tam giác CSS cổ điển thực chất không phải là tam giác, mà là một phần tử có độ rộng và chiều cao bằng không, với ba viền trong suốt và một viền có màu, tất cả giao nhau tại một điểm duy nhất. Trình tạo này sẽ xuất ra đoạn khai báo đó theo bốn hướng (trên, dưới, trái, phải), với kích thước bằng giá trị điểm ảnh bạn chọn và được tô bằng màu bạn chỉ định. Rất phù hợp để làm mũi tên tooltip, bong bóng lời thoại và dấu phân cách breadcrumb.

Cách tạo tam giác từ viền

  1. 1

    Chọn một hướng

    Trên, dưới, trái hoặc phải. Hướng quyết định viền nào được tô màu và ba viền còn lại vẫn trong suốt.

  2. 2

    Thiết lập kích thước

    Giá trị kích thước được dùng cho mọi độ rộng viền. Một tam giác kích thước 60px sẽ rộng 120px (hoặc cao 120px, tùy theo hướng).

  3. 3

    Chọn màu tô

    Ô nhập màu chỉ hoạt động với giá trị hex (ví dụ `#10b981`); các màu rgb, rgba hoặc màu có tên không được hỗ trợ. Màu chỉ áp dụng cho viền ở phía đối diện.

  4. 4

    Sao chép quy tắc CSS

    Kết quả là một bộ quy tắc `.triangle { ... }` đầy đủ, hãy đưa nó vào bảng kiểu của bạn và thêm `<div class="triangle"></div>` ở những vị trí cần thiết.

Vì sao thủ thuật viền lại hiệu quả

Khi một hộp có width: 0 và height: 0, bốn viền của nó gặp nhau tại một điểm trung tâm duy nhất. Vì các viền ghép với nhau ở góc 45 độ, mỗi viền vốn đã là một tam giác, chỉ là ba trong số đó không hiển thị. Tô màu cho một viền, bạn sẽ thấy tam giác đó.

Bảng hướng

Hướng Viền hiển thị Viền trong suốt
Lên border-bottom border-left, border-right, border-top
Xuống border-top border-left, border-right, border-bottom
Trái border-right border-top, border-bottom, border-left
Phải border-left border-top, border-bottom, border-right

Cách tính kích thước

Cả ba viền trong suốt dùng chung một giá trị kích thước, và viền hiển thị cũng dùng cùng kích thước đó. Do đó, một tam giác với size: 60:

  • Chiều rộng = 2 × 60 = 120px với tam giác hướng lên/xuống
  • Chiều cao = 2 × 60 = 120px với tam giác hướng trái/phải

Nếu cần một tam giác bất đối xứng (đáy hẹp hơn, đỉnh cao hơn), hãy đặt một kích thước cho các viền trong suốt và một kích thước khác cho viền hiển thị, ví dụ border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid red; sẽ tạo ra một tam giác hướng lên cao và hẹp.

Khi nào nên dùng SVG thay thế

  • Bạn cần nhiều đỉnh chứ không phải ba, hãy dùng <polygon>.
  • Tam giác phải co giãn mượt mà theo phần tử cha, hãy dùng viewBox và preserveAspectRatio.
  • Bạn muốn tô màu chuyển sắc (gradient), nét viền (stroke) hoặc đầu bo tròn, viền CSS không làm được điều nào trong số đó.

Câu hỏi thường gặp

Chỉ với viền thì không được: độ rộng viền không chấp nhận % hay vw theo cách nào được hỗ trợ tốt. Nếu cần co giãn mượt mà, hãy chuyển sang SVG <polygon> hoặc dùng clip-path: polygon(...) trên một phần tử thông thường.

Bạn không thể bo tròn góc nơi các viền gặp nhau. Hãy dùng SVG có đường path được vẽ nét kèm stroke-linejoin: round, hoặc kết hợp clip-path: polygon(...) với một chút filter: drop-shadow để che mép.

Có, đây là trường hợp sử dụng phổ biến nhất. Hãy đặt tam giác theo kiểu absolute sát mép tooltip và cho màu tô trùng với màu nền của tooltip để tất cả trông như một bong bóng duy nhất.

Có. Hướng, kích thước và màu bạn chọn được gửi đến máy chủ của chúng tôi kèm theo yêu cầu tải trang để máy chủ dựng đoạn CSS. Trong luồng từng bước, các giá trị này cũng được mang theo trong liên kết trang. Chúng không được lưu trữ.

Công cụ liên quan

Bảng tham chiếu ASCII

Bảng ASCII đầy đủ từ 0 đến 127 với giá trị thập phân, thập lục phân, bát phân, nhị phân và ký hiệu tham chiếu ký tự số HTML, gồm NUL, LF và DEL.

Tham chiếu ký tự HTML

Danh sách có thể tìm kiếm các thực thể HTML, mã tên và mã số tương ứng của chúng, cùng chức năng sao chép chỉ với một cú nhấp cho các ký tự đặc biệt và biểu tượng.

Bảng tham khảo phím tắt

Tìm phím tắt mặc định theo tài liệu của VS Code, Chrome và Bash dùng GNU Readline trên macOS, Windows và Linux.

Bộ chuyển đổi Base64 sang Hex

Chuyển chuỗi Base64 chuẩn thành các byte nền tảng được viết dưới dạng hexadecimal liên tục in hoa. Giải mã nghiêm ngặt, lý tưởng cho token, khóa và chữ ký JWT.

Trình xem hex của tệp nhị phân

Chọn một tệp và kiểm tra phần dữ liệu giới hạn từ bất kỳ offset byte hợp lệ nào dưới dạng hex dump cục bộ với cột offset, hex và ASCII.

Công cụ xác thực số điện thoại

Kiểm tra cấu trúc số theo quốc gia và xem khu vực, loại số cùng các định dạng E.164, quốc tế, quốc gia và RFC 3966.

Công cụ này có phiên bản bằng các ngôn ngữ khác