左侧菜单收缩展开

效果： 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

实现矩形和层级关系需要注意