a11y.skipToMainContent
1

Trình tạo tam giác CSS

Tạo ra các tam giác CSS tinh khiết với mẹo biên giới — chọn một hướng, kích thước và màu sắc, rồi sao chép hệ điều hành.

px
px

Diagonal (corner) triangles are right-angled and ignore the separate height value, using the width for both sides.

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Triangle Generator

  1. Chọn một hướng — lên, xuống, trái, phải, hoặc một trong bốn góc chéo.
  2. Đặt độ rộng và chiều cao để điều khiển điểm và đáy của tam giác.
  3. Chọn màu điền cho mặt thấy của tam giác.
  4. Ấn vào để sao chép chiều rộng, chiều cao và các khai báo biên giới.

Tên là gì?

Một tam giác tinh khiết-CSS được thực hiện bằng cách cung cấp cho một phần tử kích thước không biên giới dày và sau đó làm cho ba trong số các biên giới < code bậc cha mẹ ¶. Khi biên giới màu gặp những đường thẳng trong suốt, các đường chéo tạo thành một tam giác — không cần hình ảnh hay SVG. Máy phát điện này xử lý toán học cho bạn: chọn một trong tám hướng (4 mặt cộng với bốn góc vuông), đặt mã < code=width>, < code>heth> và màu sắc, và sao chép kết quả < code>width: 0; chiều cao: 0; và < code= Mã lệnh

Advertisement

FAQ

Làm thế nào để tam giác đường biên được thực hiện?
Một yếu tố với chiều rộng 0 và chiều cao 0 vẫn còn làm cho các biên giới của nó, mà đáp ứng tại 45 độ đường may. tô màu một biên giới và làm cho ba viền còn lại để lại một hình tam giác, với điểm đối diện với màu sắc.
Tại sao hình tam giác góc vuông?
Đường chéo chỉ sử dụng hai cạnh biên giới, vì vậy tam giác có một góc vuông nơi các biên giới gặp nhau. Vì cả hai bên đều có cùng chiều rộng biên giới, tam giác góc sử dụng giá trị chiều rộng cho cả hai chân và bỏ qua chiều cao riêng biệt.
Làm thế nào để thay đổi kích thước của tam giác?
Điều chỉnh độ rộng và chiều cao: một viền màu lớn hơn làm cho tam giác dài hơn theo hướng đó, trong khi viền trong suốt đặt chiều rộng của cơ sở. Công cụ cập nhật các giá trị biên giới cho bạn khi bạn kéo con trượt.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Triangle Generator on Wikipedia·Developer Tools on Wikipedia·CSS Triangle Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement