如何设计这样的东西？

Question

如何设计这样的东西。 如果有人提出一个想法，我会很棒。

Answer 1

使用:after和:before简单地绘制线条，使用transform: rotate()简单地旋转图标。

* {box-sizing: border-box}
body {margin:0}

div#container {
  height: 200px;
  
  background-color: #aaa;
}

nav#networks-nav {
  width: 30px;
  height: 100%;
}

nav#networks-nav:before, nav#networks-nav:after {
  width: 2px;
  height: calc(50% - 50px);
  
  display: block;
  
  margin: 10px auto;
  
  background-color: #ffffff60;
  
  content: "";
}

div.networks-icons {
  text-align: center;
}

img.network {
  width: 20px;
  height: 20px;
  
  transform: rotate(-90deg);
}

<div id="container">
  <nav id="networks-nav">
    <div class="networks-icons">
      <img class="network" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-32.png" />
      <img class="network" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-32.png" />
      <img class="network" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-32.png" />
      <img class="network" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-32.png" />
    </div> 
  </nav>
</div>