效果图如下：
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>
