Công cụ tạo hình tam giác CSS

Trình tạo tam giác CSS là một công cụ tương tác cho phép bạn tạo tam giác CSS thuần mà không cần sử dụng hình ảnh hoặc SVG. Nó tận dụng thủ thuật viền CSS để tạo tam giác trong 8 hướng (trên, dưới, trái, phải và bốn đường chéo) với kích thước và màu sắc tùy chỉnh. Mã CSS được tạo có thể sao chép trực tiếp vào dự án của bạn.

Chọn hướng tam giác từ các nút hướng (trên, dưới, trái, phải hoặc đường chéo). Điều chỉnh chiều rộng và chiều cao bằng các thanh trượt để kiểm tra kích thước tam giác. Chọn màu bằng bộ chọn màu. Xem trước được cập nhật theo thời gian thực và mã CSS được tạo hiển thị ở dưới cùng. Nhấp vào nút sao chép để sao chép CSS vào bảng tạm.

Tam giác CSS sử dụng một kỹ thuật khéo léo với viền. Khi một phần tử có chiều rộng và chiều cao bằng không, các viền của nó gặp nhau tại điểm trung tâm. Bằng cách làm cho một số viền trong suốt và những viền khác có màu, bạn tạo ra hình dáng của một tam giác. Ví dụ, tam giác hướng lên sử dụng viền trái và phải trong suốt với viền dưới có màu. Độ rộng viền quyết định kích thước và tỷ lệ của tam giác.

Trình tạo hỗ trợ 8 hướng: trên, dưới, trái, phải, trên trái, trên phải, dưới trái và dưới phải. Các tam giác đường chéo chỉ sử dụng hai viền thay vì ba, tạo thành hình tam giác vuông. Chiều rộng kiểm soát cạnh đáy của tam giác và chiều cao kiểm soát chiều cao của nó. Để tạo tam giác cân hoàn hảo, đặt chiều rộng và chiều cao bằng nhau.

Tam giác CSS thường được sử dụng cho mũi tên tooltip, con trỏ menu thả xuống, đuôi bong bóng thoại, dấu phân cách breadcrumb và yếu tố trang trí. Chúng nhẹ, không yêu cầu thêm yêu cầu HTTP và co giãn hoàn hảo ở mọi độ phân giải. Kết hợp chúng với CSS transitions và transforms để tạo hiệu ứng mượt mà.