CSS tạo hình tam giác

Mình cần tạo một biểu tượng hình tam giác đều trỏ xuống dưới (để khi click vào thì sẽ xổ ra một menu). Có cách nào mà chỉ cần sử dụng CSS để làm việc này không vậy mọi người?

1 Answer(s)

Hau Van Hau Van

Bạn có thể làm một thủ thuật nhỏ với html và css, căn chỉnh border của thẻ <span> để có kết quả như ý:

<!doctype html>
<html lang="en">
<head>
    <style type="text/css">
    .arrow-down {
        display: block;
        width: 0;
        height: 0;
        border: 40px solid #333;
        margin: 0 auto;
        border-bottom-width: 0;
        border-right-color: transparent;
        border-left-color: transparent;
    }
    </style>
</head>
<body>
<div style="text-align: center; margin: 30px auto">
    <span class="arrow-down"></span>
</div>
</body>
</html>
Content must be at least 100 characters

Related Discussion