Create right arrow on div and arrow should appear on top of parent container on div hover – Html

I am trying to create a list of div items with a right arrow which I am able to do but the requirement is to show the arrow outside the parent, basically overlapping the div’s parent. That’s where I am stuck for a long time. I need this to do on a div’s hover. Need quick help on this. Thanks.

HTML –

<div class="parentDiv">
   <div class="leftInnerDiv">
     <div class="list-container">
      <div>
       List Item 1
      </div>
      <div>
       List Item 2
      </div>
      <div>
       List Item 3
      </div>
      <div>
       List Item 4
      </div>
      <div>
       List Item 5
      </div>
      <div>
       List Item 6
      </div>
      <div>
       List Item 7
      </div>
      <div>
       List Item 8
      </div>
      <div>
       List Item 9
      </div>
      <div>
       List Item 10
      </div>
    </div>
  </div>
  <div class="rightInnerDiv">

  </div>
</div>

CSS –

.parentDiv {
  background-color: #fff;
  width:600px;
  height:400px;
  border: 1px solid #000;
  display: flex;
}
.leftInnerDiv {
  border-right: 1px solid #000;
  width: 40%;
  overflow-y: scroll;
  position: relative;
}
.list-container {
  filter: drop-shadow(1px 2px 2px rgba(50, 50, 0, 25%));
  position: absolute;
  width: 100%;
  z-index: 10;
}
.list-container > div {
  border-bottom: 0.5px solid #000;
  padding: 10px;
  background: rd-color('background', 'surface');
  clip-path: polygon(0% 0%, 91.6% 0%, 100% 50%, 91.6% 100%, 0% 100%);
  width: 100%;
}
.list-container > div:hover {
  background-color: #eee;
  cursor: pointer;
}

Current problem –

Expected output –

Here is a working fiddle to refer – https://jsfiddle.net/ctvb5gam/1/

Please help.