css实现带阴影效果的三角形箭头下拉菜单

2021-07-12 分类：CSS 评论(0)

先看效果：

小三角形的边框和矩形菜单四周，都有阴影

实现思路：
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;}}

赞(0) 打赏

未经允许不得转载：爱站程序员基地 » css实现带阴影效果的三角形箭头下拉菜单

标签：CSS