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

2022-08-12 1038点热度 0人点赞 0条评论

需求说明

在用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>

 

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论