使用纯Html/CSS画出类似流程图的上下箭头

需求说明

在用Html/CSS做一些流程图，需要用到上下的箭头，如图所示：

实现

以下是我用Html/CSS的实现方式，箭头使用的是svg（path）画出来的，箭头的颜色目前是黑色，使用：fill="#000000"，包括箭头高度、宽度，颜色等等，可能根据实际情况调整。

HTML代码如下：

<html>
    <style>
        .my-arrow-wrap {
            position: relative;
            height: 40px;
            border-left: 1px solid #000;
            margin: 10vh 50px;
            padding: 5vh 20px;
        }
        .my-arrow {
            position: absolute;
            left: -5px;
            width: 9px;
            height: auto;
        }
        .my-arrow-up {
            top: -9px;
        }
        .my-arrow-down {
            bottom: -9px;
        }
    </style>
    <div class="my-arrow-wrap">
        <svg class="my-arrow my-arrow-up" viewbox="0 0 7 10">
            <path d="M3.5 0 L7 10 Q3.5 7 0 10z" fill="#000000"></path>
        </svg>
        <svg class="my-arrow my-arrow-down" viewbox="0 0 7 10">
            <path d="M3.5 10 L7 0 Q3.5 3 0 0z" fill="#000000"></path>
        </svg>
        旁边可以显示一些内容
    </div>
</html>

使用纯Html/CSS画出类似流程图的上下箭头

需求说明

实现

文章评论