Tạo tam giác bằng CSS border trick
.triangle {
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #3B82F6;
}Công cụ CSS Triangle Generator của Tấn Phát Digital giúp bạn tạo tam giác bằng CSS border trick một cách dễ dàng và trực quan. Hỗ trợ 8 hướng tam giác: lên, xuống, trái, phải, và 4 góc chéo. Tùy chỉnh kích thước từ 10px đến 150px và chọn màu sắc tự do với color picker. Preview realtime giúp bạn thấy kết quả ngay lập tức. Copy code CSS với một click để sử dụng trong dự án. Tam giác CSS không cần image, nhẹ hơn, scale tốt, và dễ dàng thay đổi màu bằng CSS. Thường được sử dụng cho tooltip arrows, dropdown indicators, breadcrumb separators, và decorative elements. Công cụ hoàn toàn miễn phí, không cần đăng ký.
CSS triangles có nhiều ưu điểm so với việc sử dụng images. Về performance, CSS triangles không cần HTTP request để load image, giúp trang web load nhanh hơn. Về flexibility, bạn có thể thay đổi màu sắc, kích thước bằng CSS mà không cần edit image file. Về responsive, CSS triangles scale perfectly ở mọi kích thước màn hình và pixel density (retina displays). Về maintenance, code CSS dễ version control và modify hơn image files. CSS triangles được sử dụng rộng rãi trong UI components: tooltip arrows chỉ hướng, dropdown menu indicators, carousel navigation arrows, breadcrumb separators, speech bubbles, và decorative elements. Kỹ thuật này tận dụng cách browser render borders khi element có width và height bằng 0.
CSS triangle sử dụng một trick thú vị với borders. Khi một element có width và height bằng 0, các borders gặp nhau tại một điểm và tạo thành các tam giác. Mỗi border (top, right, bottom, left) tạo thành một tam giác. Để tạo tam giác hướng lên, ta set border-bottom có màu (đây là tam giác ta muốn) và border-left, border-right transparent (để tạo không gian hai bên). Border-top không cần set vì tam giác hướng lên. Kích thước tam giác được quyết định bởi border-width. Ví dụ: border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid blue; tạo tam giác hướng lên với base 100px và height 50px.
Tooltip arrows: Tam giác nhỏ chỉ từ tooltip đến element được hover, thường dùng với pseudo-elements ::before hoặc ::after. Dropdown indicators: Tam giác nhỏ bên cạnh dropdown button để indicate có menu. Speech bubbles: Tam giác tạo 'đuôi' cho chat bubbles. Breadcrumb separators: Tam giác thay cho dấu > giữa các breadcrumb items. Carousel arrows: Tam giác lớn cho prev/next buttons. Accordion indicators: Tam giác rotate khi expand/collapse. Corner ribbons: Tam giác góc cho badges như 'Sale', 'New'.
Trong thực tế, CSS triangles thường được tạo bằng pseudo-elements (::before, ::after) thay vì element riêng. Ví dụ cho tooltip arrow: .tooltip::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #333; }. Cách này giữ HTML clean và cho phép positioning linh hoạt với absolute positioning.
CSS triangle sử dụng border trick: khi element có width và height bằng 0, các borders gặp nhau tạo thành tam giác. Bằng cách set một border có màu và các borders liền kề transparent, ta được một tam giác. Ví dụ: border-bottom có màu + border-left và border-right transparent = tam giác hướng lên.
Điều chỉnh border-width của các cạnh khác nhau. Ví dụ: border-left: 30px; border-right: 30px; border-bottom: 60px; tạo tam giác cao hơn rộng. Border-left và border-right quyết định chiều rộng base, border-bottom (hoặc top) quyết định chiều cao.
CSS triangles với fixed pixel values không tự động responsive. Để responsive, có thể dùng viewport units (vw, vh) hoặc calc() với percentages. Tuy nhiên, cho UI elements nhỏ như tooltip arrows, fixed sizes thường đủ tốt vì chúng không cần scale theo screen size.
CSS border trick chỉ tạo được solid triangles. Để tạo outlined triangle, cần dùng 2 triangles chồng lên nhau (một lớn màu border, một nhỏ hơn màu background) hoặc sử dụng SVG. Clip-path cũng là option cho outlined shapes.
Dùng SVG khi cần: outlined/stroked triangles, complex shapes, animations phức tạp, hoặc triangles với gradients. CSS triangles phù hợp cho: solid color triangles đơn giản, small UI elements như arrows, và khi cần thay đổi màu dynamically bằng CSS.
Với pseudo-element: position: absolute; left: 50%; transform: translateX(-50%); để center horizontally. Hoặc dùng flexbox trên parent: display: flex; justify-content: center; align-items: center;. Lưu ý triangle có width: 0 nên centering dựa trên điểm gốc của nó.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
