先看效果:
小三角形的边框和矩形菜单四周,都有阴影
实现思路:
div+伪类
<div class="menu-list">
<div class="menu-item">Backup and Restore</div>
<div class="menu-item" style="border-bottom:none;" @click="signOut" > Sign Out </div>
</div>
css:
.menu-list{
width: 180px;
background-color: #fff;
border: 1px solid #e6eaee;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
border-radius: 4px 0 0 0 4px 4px 4px;
border-radius: 4px 0px 0px 0px 4px 4px 4px;
margin: 16px 0 0 0;
border-radius: 4px;
&:after {
position: absolute;
display: inline-block;
top: 10px;
left: 83px;
width: 0;
height: 0px;
content: '';
border-style: solid;
border-width: 7px;
border-color: #fff #fff transparent transparent;
transform: rotate(-45deg);
box-shadow: 2px -2px 2px #eee;
}
}