Trình tạo tam giác CSS

Tạo tam giác thuần CSS (mẹo hộp kích thước 0 kết hợp border) theo bất kỳ hướng nào.

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #6366f1;

Related tools

How it works

  1. 1

    Chọn hướng, kích thước và màu

    Lên, xuống, trái hoặc phải.

  2. 2

    Xem phần xem trước trực tiếp

    Cập nhật ngay khi bạn điều chỉnh.

  3. 3

    Sao chép CSS

    Không cần ảnh hoặc SVG — chỉ CSS thuần.

FAQ

Tam giác CSS thực sự hoạt động như thế nào?
Một hộp kích thước 0 với border trong suốt ở hai cạnh và border màu đặc ở cạnh thứ ba — cạnh border nhìn thấy sẽ được hiển thị thành tam giác.
Công cụ này có gửi dữ liệu tôi nhập đi đâu không?
Không — CSS được tạo hoàn toàn trong trình duyệt của bạn.