컨테이너와 함께 떠 다니는 CSS 트라이앵글

컨테이너 옆에 (배경을 모방 한) 컨테이너와 오른쪽에 파란색으로 된 삼각형을 넣으려고합니다.컨테이너와 함께 떠 다니는 CSS 트라이앵글

몇 가지 해결책을 시도했지만 삼각형의 절대 위치 지정을 사용하여 절대 배치 된 삼각형 위에 요소를 추가하면 위치가 깨집니다. 또한 :after 및 :before으로 삼각형을 시도했지만 컨테이너에 clear을 사용했지만 작동하지 않았습니다.

CSS :

#sortables { 
padding: 15px; 
} 

.sortable { 
    list-style-type: none; 
    background-color: #d2e0f2; 
    padding: 5px; 
} 

.sortable li { 
    margin: 5px; 
    padding: 3px; 
} 

.sortable li:hover { 
    cursor: move 
} 

ul{ 
    margin:0; 
} 

.dimensions_container { 
    float: left; 
    display: block; 
    position: relative; 
    width: 160px; 
    margin:10px; 
} 

.triangle-right{ 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 10px; 
    left: 170px; 
    width: 0; 
    height: 0; 
    border-color: transparent transparent transparent #d2e0f2; 
    border-style: solid; 
    border-width: 17px; 
} 

.triangle-left{ 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 1px; 
    left: 25px; 
    width: 0; 
    height: 0; 
    border-color: transparent transparent transparent white; 
    border-style: solid; 
    border-width: 17px; 
} 


.header { 
    text-align:center; 
    padding: 3px; 
    width: 154px; 
    background-color: #d2e0f2; 
}

HTML :

<div id="sortables"> 
    <div class="dimensions_container"> 
     <div class="header">Available groups</div> 
     <ul id="sortable1" class="sortable droptrue ui-sortable"> 
      <li id="undefined" class="ui-state-default">undefined</li> 
      <li id="undefined" class="ui-state-default">undefined</li> 
      <li id="undefined" class="ui-state-default">undefined</li> 
     </ul> 
    </div> 
    <div class="triangle-right"></div> 
    <div class="dimensions_container"> 
     <div class="header">Grouped by</div> 
     <ul id="sortable2" class="sortable droptrue ui-sortable"></ul> 
    </div> 
    <div class="triangle-left"></div> 
    <div class="dimensions_container"> 
     <div class="header">Drill into</div> 
     <ul id="sortable3" class="sortable droptrue ui-sortable"></ul> 
    </div> 
</div>