先看效果图：
代码如下：
<html>
<head>
<title></title>
<style>
.arbox {
position: relative;
top: -1rem;
display: inline-block;
margin-left: 2rem;
float: left;
margin-top: 1rem;
}
.box{
float: left;
width: 3rem;
height: 3rem;
border: 1px solid #000;
border-radius: 50%;
line-height: 43px;
margin-right: 10px;
background-color: #02c8a7;
text-align: center;
color: #fff;
position: relative;
float: left;
display: inline-block;
margin-left: 1.5rem;
top: 1rem;
left: 2rem;
margin-top: -2rem;
}
.arr {
width: 0;
height: 0;
overflow: hidden;
border-width: 0.7rem;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #000;
position: absolute;
left: 2.1rem;
}
.block {
background-color: #000;
height: 0.5rem;
left: 3px;
overflow: hidden;
position: absolute;
top: 0.45rem;
width: 2rem;
}
.container{
margin-top: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div class="box">导航</div>
<div class="arbox">
<div class="arr"></div>
<div class="block"></div>
</div>
<div class="box">导航1</div>
</div>
</body>
</html>