按钮组

目的：主要是练习结构化，标签意义化，根据火热的bootstrap来加深自己结构化的理解。还可以学习它的css样式以及css顺序。没有加js交互~

html：

<div class="drop-down-menu">
    <button class="btn">
        Dropup
        <span class="triangle"></span>
    </button>
    <ul class="menu">
        <li><a href="#">action</a></li>
        <li><a href="#">another action</a></li>
        <li><a href="#">something else here</a></li>
    </ul>
</div>

css：

.drop-down-menu{
    margin-bottom: 120px;
}
.btn{
    display: inline-block;
    padding: 6px 12px;
    font-weight: 400;
    line-height: 1.42;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
}
/*倒三角*/
.triangle{
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px solid #555;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.menu{
    position: absolute;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.menu>li>a{
    display: block;
    padding: 3px 20px;
    line-height: 1.42;
    white-space: nowrap;
}

<div id="drop-down-menu" class="demo drop-down-menu">
        <div class="h-title">
            <h3>下拉菜单</h3>
        </div>
        <button class="btn">ANNIU</button>
        <div class="btn-menu">
            <button class="btn">
                <span class="triangle"></span>
                <span class="drop-up">Dropup</span>
            </button>
            <ul class="menu">
                <li><a href="#">action</a></li>
                <li><a href="#">another action</a></li>
                <li><a href="#">something else here</a></li>
            </ul>
        </div>
    </div>

 .drop-down-menu{
        margin-bottom: 120px;
    }
    .btn-menu{
        display: inline-block;
        margin-left: -6px;
    }
    .btn{
        display: inline-block;
        padding: 6px 12px;
        font-weight: 400;
        line-height: 1.42;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        user-select: none;
        background-color: #fff;
        border: 1px solid #ccc;
    }
    .drop-up{
        display: inline-block;
        position:absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        background-color: red;
        overflow:hidden;
        clip: rect(0,0,0,0);
    }
    /*倒三角*/
    .triangle{
        display: inline-block;
        width: 0;
        height: 0;
        vertical-align: middle;
        border-top: 4px solid #555;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
    }
    .menu{
        position: absolute;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
        box-shadow: 0 6px 12px rgba(0,0,0,.175);
    }
    .menu>li>a{
        display: block;
        padding: 3px 20px;
        line-height: 1.42;
        white-space: nowrap;
    }

<div class="button-group">
        <div class="btn-warp">
            <button class="btn">button1</button>
        </div>
        <div class="btn-warp">
            <button class="btn">button2</button>
        </div>
        <div class="btn-warp">
            <button class="btn">button3</button>
        </div>
    </div>

.button-group{
        display: inline-block;
    }
    .btn{
        width: 100%;
        padding: 6px 12px;
        font-weight: 400;
        line-height: 1.42;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        user-select: none;
        background-color: #fff;
        border: 1px solid #ccc;
    }

 <div class="button-group">
        <div class="btn-warp"><button class="btn">button1</button></div>
        <div class="btn-warp"><button class="btn">button2</button></div>
        <div class="btn-warp"><button class="btn">button3</button></div>
    </div>

.button-group{
        display: table;
        width: 80%;
        margin: 0 auto;
        padding:25px 20px;
        border:1px solid #999;
    }
    .btn-warp{
        display: table-cell;
    }
    .btn{
        width: 100%;
        padding: 6px 12px;
        font-weight: 400;
        line-height: 1.42;
        text-align: center;
        vertical-align: middle;
        touch-action: manipulation;
        cursor: pointer;
        user-select: none;
        background-color: #fff;
        border: 1px solid #ccc;
    }