截屏2021-01-25 下午9.57.57.png
    index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Loading...</title>
    8.     <link rel="stylesheet" type="text/css" href="style.css" />
    9. </head>
    11. <body>
    12.     <div class="action">
    13.         <div class="profile">
    14.             <img src="img.jpeg" />
    15.         </div>
    16.         <div class="menu">
    17.             <h3>someone famous<br><span>website designer</span></h3>
    18.             <ul>
    19.                 <li><img src="export.png" /><a href="#">导出</a></li>
    20.                 <li><img src="help.png" /><a href="#">帮助</a></li>
    21.             </ul>
    22.         </div>
    23.     </div>
    24. </body>
    26. </html>

    style.css

    * {
    padding: 0;
    margin: 0;
}

body{
    font-size: 14px;
    background: #f0f0f0;
}
.action{
    position: fixed;
    top: 20px;
    right: 20px;
}
.action .profile{
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.action .profile img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.action .menu::before{
    content:  '';
    position: absolute;
    top: -5px;
    right: 25px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    transform: rotate(45deg);
    border-radius: 2px;
}

.action .menu{
    position: absolute;
    top: 80px;
    right: -10px;
    background: #ffffff;
    width: 200px;
    /* box-sizing: 0 5px 25px rgba(0,0,0,0.3);/ */
    border-radius: 15px;
    box-sizing: border-box;
    transition: 0.5s ease-in-out;
}

.action .menu h3{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 0;
    line-height: 1.2em;
    flex-direction: column;
    font-size: 20px;
    color: #444444;
    font-weight: 500;
}
.action .menu h3 span{
    color: rgba(0, 0,0, 0.4);
    font-size: 16px;
    font-weight: 400;
}


.action .menu ul li {
    list-style: none;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0,0, 0.1);
    display: flex;
    align-items: center;
}

.action .menu ul li img{
    width: 24px;
    height: 24px;
    margin: 0 10px;
    opacity: .5;
    transition: 0.5s;
}

.action .menu ul li:hover img{
    opacity: 1;
}

.action .menu ul li a{
    text-decoration: none;
    color: #444444;
}