三横杠小标题

html如下

<div class="menu_icon">
</div>

横着的css

.menu_icon{
            width: 30px;
            height: 5px;
            border-top: 5px solid #DD575C;
            border-bottom: 5px solid #DD575C;
            background-color: #DD575C;
            padding: 5px 0;
            //好像并没有什么用background-clip: content-box;
        }

竖着的css

.menu_icon{
            width: 5px;
            height: 30px;
            border-left: 5px solid darkseagreen;
            border-right: 5px solid darkseagreen;
            padding: 0 5px;
            background-color: darkseagreen;
            background-clip: content-box;
        }

---

横着的css貌似当div被包裹在另一个div时需要添加background-clip=content-box

原因未知......