Cách tạo Tam giác (Triangle) với CSS clip-path

Giới thiệu

CSS clip-path cho phép cắt element theo hình dạng tùy ý (polygon, circle, ellipse, path). Tạo tam giác chỉ với 1 div, không cần border hack cũ.

Cú pháp clip-path polygon

clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);

Mỗi cặp tọa độ (x y) là một đỉnh. Đơn vị: %, px, hoặc calc().

3 Loại tam giác phổ biến

1. Tam giác cân pointing up (Đỉnh lên)

.triangle-up {
    width: 100px; height: 100px;
    background: #6a1b9a;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    /* Đỉnh: giữa trên (50% 0%), Góc phải dưới, Góc trái dưới */
}

2. Tam giác cân pointing down (Đỉnh xuống)

.triangle-down {
    width: 100px; height: 100px;
    background: #0c7e78;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    /* Góc trái trên, Góc phải trên, Đỉnh: giữa dưới */
}

3. Tam giác vuông (Right triangle)

.triangle-right {
    width: 100px; height: 100px;
    background: #cf295b;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    /* Góc trái trên, Góc phải trên, Góc trái dưới */
}

Ví dụ hoàn chỉnh: Bộ sưu tập tam giác

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Triangles with clip-path</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #f5f5f5; padding: 3rem; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
        
        .triangle {
            width: 150px; height: 150px;
            display: flex; align-items: center; justify-content: center;
            color: white; font-weight: 700; font-size: 1.2rem;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
            filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
            transition: transform 0.3s, filter 0.3s;
        }
        .triangle:hover { transform: scale(1.1) rotate(3deg); filter: drop-shadow(0 16px 32px rgba(0,0,0,0.2)); }
        
        /* Các loại tam giác */
        .tri-up { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); background: linear-gradient(135deg, #6a1b9a, #8e24aa); }
        .tri-down { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); background: linear-gradient(135deg, #0c7e78, #14a8a0); }
        .tri-left { clip-path: polygon(100% 0%, 100% 100%, 0% 50%); background: linear-gradient(135deg, #cf295b, #e03a6b); }
        .tri-right { clip-path: polygon(0% 0%, 100% 50%, 0% 100%); background: linear-gradient(135deg, #cc5b27, #e07030); }
        .tri-tl { clip-path: polygon(0% 0%, 100% 0%, 0% 100%); background: linear-gradient(135deg, #2c3e50, #34495e); } /* Top-Left */
        .tri-tr { clip-path: polygon(0% 0%, 100% 0%, 100% 100%); background: linear-gradient(135deg, #27ae60, #2ecc71); } /* Top-Right */
        .tri-bl { clip-path: polygon(0% 0%, 0% 100%, 100% 100%); background: linear-gradient(135deg, #f39c12, #f1c40f); color: #333; } /* Bottom-Left */
        .tri-br { clip-path: polygon(100% 0%, 0% 100%, 100% 100%); background: linear-gradient(135deg, #e74c3c, #c0392b); } /* Bottom-Right */
        
        .label { text-align: center; margin-top: 0.5rem; font-size: 0.9rem; color: #666; width: 150px; }
    </style>
</head>
<body>
    <div><div class="triangle tri-up">Up</div><div class="label">polygon(50% 0, 100% 100%, 0 100%)</div></div>
    <div><div class="triangle tri-down">Down</div><div class="label">polygon(0 0, 100% 0, 50% 100%)</div></div>
    <div><div class="triangle tri-left">Left</div><div class="label">polygon(100% 0, 100% 100%, 0 50%)</div></div>
    <div><div class="triangle tri-right">Right</div><div class="label">polygon(0 0, 100% 50%, 0 100%)</div></div>
    <div><div class="triangle tri-tl">TL</div><div class="label">polygon(0 0, 100% 0, 0 100%)</div></div>
    <div><div class="triangle tri-tr">TR</div><div class="label">polygon(0 0, 100% 0, 100% 100%)</div></div>
    <div><div class="triangle tri-bl">BL</div><div class="label">polygon(0 0, 0 100%, 100% 100%)</div></div>
    <div><div class="triangle tri-br">BR</div><div class="label">polygon(100% 0, 0 100%, 100% 100%)</div></div>
</body>
</html>

So sánh: clip-path vs Border Hack (Cách cũ)

Ứng dụng thực tế

• Tooltip arrow, speech bubble tail.
• Decorative shapes, section dividers.
• Button với góc cắt (cut-corner button).
• Loading spinner hình tam giác xoay.
• Mask cho hình ảnh (image clipping).

Công cụ hỗ trợ

Sử dụng CSS Clip Path Maker (Clippy) để trực quan tạo polygon complex.