就是一个盒子上,有个小三角的效果
其实实现小三角,网上有很多实现的方案方法,包括下面的伪类实现的方式。简单也挺简单的,就是需要考虑下小三角的 阴影怎么弄就好了
.more-btn-box {
position: absolute;
bottom: -66rpx;
left: 18rpx;
width: 204rpx;
background: #ffffff;
border-radius: 10rpx;
box-shadow: 0rpx 2rpx 15rpx 0rpx rgba(0, 0, 0, 0.12);
z-index: 99;
.more-btn-item {
height: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 40rpx;
border-bottom: 1rpx solid #999999;
margin: 0 20rpx;
padding: 20rpx;
text-align: left;
}
.more-btn-item:nth-last-of-type(1) {
border-bottom: none;
}
}
.more-btn-box::before {
content: '';
width: 20rpx;
height: 20rpx;
background: #ffffff;
transform: rotate(135deg);
box-shadow: 1px -2px 5px rgba(0, 0, 0, 0.12);
position: absolute;
top: -10rpx;
left: 28rpx;
}
.more-btn-box::after {
content: '';
width: 42rpx;
height: 26rpx;
background: #ffffff;
position: absolute;
top: 0;
left: 20rpx;
}