如何在 CSS 中制作 gmail 样式配置文件菜单？

Question

我想制作一个类似于 Gmail 的配置文件菜单，其中包含用户的显示名称和用户名，以及两个带有设置和注销的按钮。我想把它做成 8 角。

http://prntscr.com/q1vd8y

  <li>

        <!-- user profile -->
        <div class="profile">
          <img class="avatar"  src="" /><span></span>
          <!-- more menu -->
          <ul class="menu">
            <li class="name">{{name}}</li>
            <li class="name">{{useremail}}</li>
            <li class="name">{{visiblename}}</li>
            <li><a href="={{url}}">Settings</a></li>
            <li><a [routerLink]='["/logout"]'>Log out</a></li>
          </ul>
        </div>
      </li>
    </ul>

Answer 1

https://material.io/design/

这里是，我的朋友，唯一的 Material Design ！ 你可以找到可以帮助你做到这一点的 css 框架

https://materializecss.com/

例如！

https://material.angular.io/ 用于角度