css虚线上下箭头

作者: tuyrt7 | 来源:发表于2020-06-30 16:36 被阅读0次

css虚线上下箭头
css 实现三角形箭头
UML图
菜单栏下拉箭头 css样式
UML类图符号
使用Markdown画UML
UML类图与类的关系详解
UML类图详解（转载）
PlantUML-时序图-2021-06-18-周五
UML类图与类的关系详解

效果图如下：

css虚线箭头.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>css虚线箭头</title>
        <style type="text/css">
            .arrow-dotted-up{
              width: 11px;
              height: 11px;
              display: inline-block;
              position: relative;
             /* 旋转180度 */
              /* transform: rotate(180deg) translateY(-250%); */
            }
            .arrow-dotted-up::before{
              content: '';
              position: absolute;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-top: 0 solid transparent;
              border-bottom: 10px solid #034d9a;
            }
            .arrow-dotted-up .line {
                box-sizing: border-box;
                position: absolute;
                width: 50%;
                height: 30px;
                top: 10px;
                border-right: 1px dashed #034d9a;
            }
            
            .arrow-dotted-down{
                width: 10px;
                height: 10px;
                display: inline-block;
                position: relative;
                top: 28px;
            }
            
            .arrow-dotted-down::before{
              content: '';
              position: absolute;
              border-left: 5px solid transparent;
              border-right: 5px solid transparent;
              border-top: 10px solid #034d9a;
              border-bottom: 0 solid transparent;
            }
            
            .arrow-dotted-down .line {
                box-sizing: border-box;
                position: absolute;
                width: 50%;
                height: 30px;
                top: -30px;
                border-right: 1px dashed #034d9a;
            }
            
        </style>
    </head>
    <body>
        <div class="arrow-dotted-up">
            <div class="line"></div>
        </div>
        
        
        <div class="arrow-dotted-down">
            <div class="line"></div>
        </div>
    </body>
</html>