Bỏ qua tới nội dung
Toolars
Khám phá
Báo lỗi

Tiện ích Thiết kế · Cục bộ

Trình tạo tam giác CSS

CSS Triangle Generator

Tạo tam giác cân bằng kỹ thuật viền CSS theo bốn hướng, đáy và cao 8–180 px, sắc nét ở mọi mật độ màn hình. Sao chép quy tắc .triangle hoàn chỉnh.

Lộ trình tác vụ / từ đầu vào đến kết quả

Chọn hướng

Chạy cục bộ · Không có gì được tải lên

Cách Trình tạo tam giác CSS hoạt động, quyền riêng tư và các công cụ liên quan

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách tạo một tam giác CSS

  1. 01

    Chọn hướng

    Chọn Lên, Phải, Xuống hoặc Trái trong phần Hướng. Bản xem trước cập nhật tức thì — kỹ thuật này tô màu một đường viền và giữ các đường viền kề trong suốt. Không gian làm việc bắt đầu với một tam giác hướng lên.

  2. 02

    Đặt kích thước

    Chỉnh Chiều rộng đáy và Chiều cao tam giác từ 8 đến 180 px, mỗi bước 1 px. Với hướng Lên/Xuống, chiều rộng là đáy và chiều cao là khoảng cách tới đỉnh. Với Trái/Phải, chiều cao là đáy theo chiều dọc và chiều rộng là tầm vươn theo chiều ngang. Mặc định hình rộng 72 px và cao 64 px.

  3. 03

    Chọn màu tô

    Đặt Màu tô thành bất kỳ giá trị hex sáu chữ số nào — mặc định là #0f4cff. Bản xem trước trực tiếp và khai báo border-color được tạo luôn đồng bộ, nên thứ bạn thấy chính xác là thứ được sao chép.

  4. 04

    Kiểm tra trạng thái xem trước

    Bản xem trước trực tiếp render lại theo mọi thay đổi và huy hiệu trạng thái hiển thị CSS HỢP LỆ khi mọi giá trị đều nằm trong dải. Một giá trị ngoài dải sẽ chuyển nó thành KIỂM TRA GIÁ TRỊ và chặn sao chép lẫn tải xuống cho đến khi điều khiển được đánh dấu được sửa.

  5. 05

    Thử thiết lập mẫu

    Tải mẫu tạo tam giác chỉ sang phải với tầm vươn ngang 104 px, đáy dọc 86 px và màu tô #ffd11a. Đặt lại khôi phục giá trị mặc định.

  6. 06

    Sao chép hoặc tải xuống CSS

    Nhấn Sao chép CSS để chép quy tắc .triangle vào clipboard, hoặc Tải xuống .css để lưu thành toolars-triangle.css. Quy tắc đặt width và height về không và khai báo cả bốn đường viền, sẵn sàng dán vào bất kỳ stylesheet nào.

Thông tin công cụ

Xử lý
Trong trình duyệt của bạn
Dữ liệu nhập rời thiết bị này
Không bao giờ
Lưu giữ
Không có gì được lưu
Giá
Miễn phí

Dữ liệu bạn nhập ở lại trong trình duyệt.

Trình tạo tam giác CSS dùng lộ trình thực thi cục bộ đã xác minh và không tạo lịch sử đầu vào hay đầu ra ẩn.

Thực thi cục bộ

Chạy bên trong tab trình duyệt hiện tại.

Không xử lý ẩn

Dữ liệu công cụ đang hoạt động không bao giờ trở thành bản ghi tài liệu của Toolars.

Không cần tài khoản

Dùng quy trình cốt lõi mà không cần tạo hồ sơ. Mục yêu thích đồng bộ vào tài khoản sau khi bạn đăng nhập.

Đặt lại ngay lập tức

Xóa tab và dữ liệu đang làm việc sẽ biến mất.

Trình tạo tam giác CSS thực sự làm gì

Caret của dropdown, con trỏ của tooltip và dấu phân tách breadcrumb đều cần một tam giác nhỏ sắc nét, và tệp hình ảnh là công cụ sai cho việc đó: nó bị nhòe trên màn hình mật độ cao và thêm một request vào trang. Tam giác dựng từ viền CSS không phụ thuộc độ phân giải và đổi màu chỉ bằng một giá trị hex. Trình tạo tam giác CSS render hình dạng cục bộ khi bạn chỉnh hướng, kích thước và màu tô, nên mỗi vòng lặp chỉ mất vài giây. Khi đã ưng ý, một cú nhấp đưa quy tắc .triangle hoàn chỉnh vào clipboard của bạn.

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

Tam giác CSS thuần hoạt động thế nào?
Phần tử nhận width và height bằng không cùng bốn đường viền. Tô màu một đường viền trong khi hai đường viền kề giữ trong suốt sẽ để lại một tam giác sạch — quy tắc .triangle được tạo cho thấy chính xác đường viền nào mang Màu tô cho hướng bạn chọn, và đường viền đối diện đỉnh thu về không.
Tôi có thể tạo những kích thước nào?
Chiều rộng đáy và Chiều cao tam giác đều chấp nhận giá trị từ 8 đến 180 px theo bước 1 px. Một giá trị ngoài dải sẽ chuyển trạng thái xem trước thành KIỂM TRA GIÁ TRỊ và chặn sao chép hoặc tải xuống cho đến khi điều khiển được đánh dấu được sửa, nên quy tắc xuất ra luôn hợp lệ.
Tam giác có luôn đối xứng không?
Có. Với Lên và Xuống, hai đường viền bên trong suốt mỗi bên nhận một nửa chiều rộng đáy, nên đỉnh luôn nằm giữa đáy; với Trái và Phải, đường viền trên và dưới chia chiều cao theo cách tương tự. Mọi tam giác được tạo đều là tam giác cân — các hình xiên hay vuông góc cần một kỹ thuật khác như clip-path.
Làm sao đổi màu hoặc đổi kích thước tam giác về sau?
Sửa trực tiếp quy tắc được tạo: chỉ một đường viền mang màu tô, hai đường viền kề trong suốt, và đường viền đối diện đỉnh bằng không. Đổi giá trị hex duy nhất đó sẽ đổi màu, và chỉnh độ rộng các đường viền sẽ đổi hình dáng — không cần trình tạo nào sau lần sao chép đầu tiên.
Kết quả có hoạt động trên mọi trình duyệt không?
Có. Tam giác dựa trên viền là một trong những kỹ thuật lâu đời nhất của CSS và không cần hỗ trợ hình ảnh, SVG hay clip-path, nên quy tắc được tạo render giống nhau trên mọi trình duyệt hiện đại, ở mọi mật độ màn hình, mà không cần một request mạng nào.
Có gì được tải lên hoặc lưu lại không?
Không. Bản xem trước được render cục bộ từ các giá trị kiểu đã qua kiểm tra, và như chân trang không gian làm việc ghi rõ, không giá trị nào được tạo ra đi vào bộ nhớ lưu trữ, log, analytics hay mạng.

Tiếp tục trong Thiết kế

Tác vụ liên quan, không phải ngõ cụt.

Chuyển sang một không gian làm việc tập trung khác mà không cần quay lại mục lục đầy đủ.

Trình tạo animation loading CSS

CSS Loader Generator

Thiết kế spinner vòng quỹ đạo hoặc ba chấm nảy với khung 24–160 px, chu kỳ 0,2–4 giây và màu tùy chọn, rồi sao chép CSS kèm @keyframes và reduced-motion.

Tạo

Trình tạo hộp kiểm CSS

CSS Checkbox Generator

Tạo kiểu checkbox 18–64 px giữ nguyên input thật — focus bàn phím và công nghệ hỗ trợ vẫn hoạt động — với màu hai trạng thái, rồi sao chép CSS sẵn dùng.

Tạo

Trình tạo công tắc CSS

CSS Switch Generator

Thiết kế công tắc CSS thuần với thanh trượt 44–128 px và núm trượt khớp tự động, xem trước hiệu ứng 180 ms, rồi sao chép mã kèm xử lý focus và reduced-motion.

Tạo

Trình tạo clip path CSS

CSS Clip Path Generator

Chỉnh đỉnh bằng cách kéo, bàn phím hoặc tọa độ. Bắt đầu từ bốn mẫu và sao chép khai báo clip-path hoặc CSS đầy đủ ngay trên máy.

Tạo