css实现菜单按钮的“四个横”

如图:
css实现菜单按钮的“四个横”_第1张图片
实现四个横只需利用border特性的double值即可。

<div class="container">
  <div class="box">div>
div>

css为

.container {
  padding: 4px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px #ccc;
  display: inline-block;
}

先铺垫一下, 主要在class为box上实现。

.box {
  width: 120px;
  height: 20px;
  border-top: 60px double;
  border-bottom: 60px double;
}

我们将box设置为20px高, 上下border都设置为60px的double即可。
如下图:
css实现菜单按钮的“四个横”_第2张图片

你可能感兴趣的:(前端,CSS)