image.png
实现原理：图标整体是用的定位
.side-menu{
position: relative;
height:100%;
background-color: #164B9E;
border-radius:0 15px 15px 0;
.fold-Menu{
z-index: 9;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -18px;
width: 18px;
height: 86px;
border-width: 10px 0 10px 18px;
border-style:solid;
border-color: transparent transparent transparent #164B9E;
.fold-icon{
position: absolute;
color: #fff;
left: -16px;
top: 50%;
transform: translateY(-50%);
}
}
}
html
image.png
实现矩形和层级关系需要注意
