html/css中国风按钮样式

想模仿这个

根据页面风格去掉了圆角部分，简单模仿了个出来，结果特别像电池。555~~

 

这次没用上，先备份了，以后再用时候可以直接拿过来改改再用。

<div class="navbar">
                <a class="nav" href="javascript:getQuestion('back');">
                    <div class="left-bg">
                        <div class="squre"></div>
                    </div>
                    上一题
                    <div class="right-bg">
                        <div class="squre"></div>
                    </div>
                </a>
                <a class="nav" href="javascript:getQuestion('next');">
                    <div class="left-bg">
                        <div class="squre"></div>
                    </div>
                    下一题
                    <div class="right-bg">
                        <div class="squre"></div>
                    </div>
                </a>
            </div>

.submitArea .navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

.submitArea .navbar .nav {
    position: relative;
    width: 94px;
    height: 33px;
    line-height: 33px;
    margin: 0 15px;
    padding: 0;
    color: #fff;
    border-radius: 0;
    background: #7F9BDC;
    border: 1px solid #7F9BDC;
    box-sizing: border-box;
    text-align: center;
    opacity: 0.7;
}

.left-bg, .right-bg {
    display: block;
    position: absolute;
    top: 5px;
    left: -7px;
    width: 8px;
    height: 20px;
    border-radius: 0;
    background: #7F9BDC;
}

.right-bg {
    left: auto;
    right: -7px;
}


.submitArea .navbar
.nav:after {
    display: block;
    position: absolute;
    top: 3px;
    left: 4px;
    width: 85px;
    height: 25px;
    content: '';
    border-radius: 0;
    border: 1px solid rgba(255,255,255,0.7);
    box-sizing: border-box;
}

.left-bg:after, .right-bg:after {
    display: block;
    position: absolute;
    top: 3px;
    left: 4px;
    width: 9px;
    height: 14px;
    content: '';
    background: #7F9BDC;
    border: 1px solid;
    border-color: rgba(255,255,255,0.7) transparent rgba(255,255,255,0.7) rgba(255,255,255,0.7);
    box-sizing: border-box;
    z-index: 9;
}

.right-bg:after {
    left: auto;
    right: 4px;
    border-color: rgba(255,255,255,0.7) rgba(255,255,255,0.7) rgba(255,255,255,0.7) transparent;
}

.squre, .squre:after {
    position: absolute;
    left: 11px;
    top: 3px;
    width: 3px;
    height: 3px;
    /* background: rgba(255,255,255,0.7); */
    border: 1px solid rgba(255,255,255,0.7);
    z-index: 99;
    box-sizing: border-box;
}


.squre:after {
    left: -1px;
    top: auto;
    bottom: -12px;
    content: '';
}

.right-bg .squre, .right-bg .squre:after {
    left: auto;
    right: 10px;
}

.right-bg .squre:after {
    right: -1px;
}