模拟微信的黑色顶部

html

<nav>
			<a href="javaScrpt:void(0)" class="back">返回</a>
			<a href="javaScrpt:void(0)" class="title">联名会员卡预约</a>
			<a href="javaScrpt:void(0)" class="more"><i></i></a>
		</nav>

css

nav{
    height: 4rem;
    background: #19181D;
    width: 100%;
    z-index: 2000!important;
    position: relative;
    color: #FFFFFF;
    display: flex;
}
nav a{
    display: block;
    flex:1;
    height: 4rem;
    color: #FFFFFF;
    line-height: 4rem;
    text-align: center;
}
nav a:link, nav a:hover{
    color: #FFFFFF;
}
nav .title{
    flex:4;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 2px;
}
nav .back::before{
    content: '';
    border-top: .2rem solid #fff;
    border-left: .2rem solid #fff;
    width: .8rem;
    height: .76rem;
    -webkit-transform: rotate(-45deg);
    margin-left: 1.3rem;
    margin-top: 1.4rem;
    display: inline-block;
}
.more::before, .more>i::before, .more>i::after{
    content: '';
    background: #FFFFFF;
    width: .5rem;
    height: .5rem;
    display: inline-block;
    border-radius: 50%;
    margin: 0 .15rem;
}

效果