Best way to change bootstrap 4 hamburger icon to three dots menu icon using only css

问题

The standard bootstrap 4 navbar button features a hamburger icon.

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

How can this be changed from the original hamburger icon to a css only three dots or kebab dots menu icon?

From this..

To this... (I appreciate the colors are different)

回答1:

body {
  background:#262626;
}

input {
  visibility:hidden;
}

.menu_container {
  padding:10px;
  border:1px solid #a0a0a0;
  width:30px;
  height:30px;
  position:relative;
  border-radius:4px;
}

.line1,
.line2,
.line3 {
  width:calc(100% - 20px);
  height:3px;
  border-radius:2px;
  background:#a0a0a0;
  position:absolute;
  top:50%;
  transform:translateY(-50%)
}

.line2 {
  transform:translateY(calc(-50% + 10px));
}

.line3 {
  transform:translateY(calc(-50% - 10px));
}

.dot_menu {
  background:#e0e0e0;
  position:relative;
  height:50px;
  border:1px solid #e0e0e0;
  width:20px;
  margin:0;
  display:none;
}

input:checked + .menu_container{
  display:none;
}


input:checked + div + div {
  display:block;
}

.dot1,
.dot2,
.dot3 {
  height:9px;
  width:9px;
  background:#262626;
  border-radius:2px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

.dot2 {
  transform:translateY(calc(-50% + 13px)) translateX(-50%);
}

.dot3 {
  transform:translateY(calc(-50% - 13px)) translateX(-50%);
}

<label>
  <input type="checkbox">
<div class="menu_container">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>
<div class="dot_menu">
  <div class="dot1"></div>
  <div class="dot2"></div>
  <div class="dot3"></div>
</div>
</label>

来源：https://stackoverflow.com/questions/53558783/best-way-to-change-bootstrap-4-hamburger-icon-to-three-dots-menu-icon-using-only