Стрела с неполной границей

Question

Как сделать эту стрелку на левой стороне белых дел. Вот css, который я пробовал, но он делает только одну границу цвета.

.white-box{ 
     padding: 20px; 
    background: #fff; 
    } 
    .white-box:after,white-box:before{ 
    right: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    } 
    .white-box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-right-color: #88b7d5; 
    border-width: 30px; 
    margin-top: -30px; 
} 
.white-box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-right-color: #c2e1f5; 
    border-width: 36px; 
    margin-top: -36px; 
} 

Answer 1

С inline svg и path element это довольно просто:

svg{ 
 
    width:30%; height:auto; 
 
    display:block; 
 
}

<svg viewbox="1 0 5 10"> 
 
    <path d="M5 3 V1 L2 5 L5 9 V7" stroke="grey" stroke-width="0.5" fill="#fff"/> 
 
</svg>