.arrow-panel {  position: absolute; z-index:1000;
    left:200px; top:200px; width:300px;  padding: 10px;;
    box-sizing: border-box; border-radius: 6px;;
    background:white;
    box-shadow: 0px 3px 5px 0 rgba(0, 0, 0, 0.4);
}
/* .arrow-box::after{
    content: "";
    position: absolute; border-radius: 0 0 0 6px;
    width: 20px;
    height: 20px;
    margin-left: -0.8em;
    bottom: -23px;
    left: 20%;
    box-sizing: border-box;
    
    border: 12px  solid black;
    border-color: transparent transparent white white;
    
    transform-origin: 0 0;
    transform: rotate(-45deg);
    
    box-shadow: -3px 3px 5px -2px rgba(0, 0, 0, 0.4);
} */
.arrow-panel::after{ content: ""; position: absolute; border-radius: 0 0 0 6px; box-sizing: border-box;
    border: 12px  solid black; border-color: transparent transparent white white; transform-origin: 0 0;
    width: 20px; height: 20px;
}

.arrow-panel-left::after{
    
    width: 20px;
    height: 20px;
    left:0px;
    top: 20px;
   
    transform: rotate(45deg);
    
    box-shadow: -3px 3px 5px -2px rgba(0, 0, 0, 0.4);
}
.arrow-panel-right::after{  right:-23px; top: 50px; 
    transform: rotate(-135deg); box-shadow: -3px 3px 5px -2px rgba(0, 0, 0, 0.4);
}