padding与图形生成实例页面

展示

代码

• HTML：

  <i class="icon-menu"></i>
  <i class="icon-dot"></i>

• CSS：

  .icon-menu {
      display: inline-block;
      width: 140px; height: 10px;
      padding: 35px 0;
      border-top: 10px solid;
      border-bottom: 10px solid;
      background-color: currentColor;
      background-clip: content-box;
  }
  .icon-dot {
      display: inline-block;
      width: 100px; height: 100px;
      padding: 10px;
      border: 10px solid;    
      border-radius: 50%;
      background-color: currentColor;
      background-clip: content-box;
  }