css画任意方向箭头

CSS画任意方向箭头

基础概念

CSS箭头通常是通过使用伪元素（如 ::before 和 ::after）和边框技巧来创建的。通过设置不同方向的边框颜色和宽度，可以形成箭头的形状。

类型

上箭头
下箭头
左箭头
右箭头
对角线箭头

应用场景

导航菜单中的箭头指示
按钮上的箭头
图表中的指示箭头

示例代码

以下是一个创建任意方向箭头的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Arrow</title>
    <style>
        .arrow {
            position: relative;
            display: inline-block;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }

        .arrow::before {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
        }

        /* 上箭头 */
        .arrow-up::before {
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 0 5px 5px;
            border-color: transparent transparent #f0f0f0;
        }

        /* 下箭头 */
        .arrow-down::before {
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px 5px 0;
            border-color: #f0f0f0 transparent transparent;
        }

        /* 左箭头 */
        .arrow-left::before {
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px 0 5px 5px;
            border-color: transparent transparent transparent #f0f0f0;
        }

        /* 右箭头 */
        .arrow-right::before {
            top: 50%;
            right: 100%;
            margin-top: -5px;
            border-width: 5px 5px 5px 0;
            border-color: transparent #f0f0f0 transparent transparent;
        }

        /* 对角线箭头（左上到右下） */
        .arrow-diagonal::before {
            top: 0;
            right: 0;
            border-width: 5px 5px 0 0;
            border-color: #f0f0f0 transparent transparent transparent;
        }
    </style>
</head>
<body>
    <div class="arrow arrow-up">上箭头</div>
    <div class="arrow arrow-down">下箭头</div>
    <div class="arrow arrow-left">左箭头</div>
    <div class="arrow arrow-right">右箭头</div>
    <div class="arrow arrow-diagonal">对角线箭头</div>
</body>
</html>