Curved Arrows for Gantt Chart

HTML

<h4>Gantt Chart</h4>
<div class="cell">
    <div class="bar" style="width: 50px;"></div>
</div>
<div class="cell">
    <div class="bar" style="margin-left: 50px; width: 80px;">
        <div class="bar-arrow">
            <div class="arrow-connector"></div>
        </div>
    </div>
</div>
<div class="cell">
    <div class="bar" style="margin-left: 130px; width: 100px;">
        <div class="bar-arrow">
            <div class="arrow-connector"></div>
        </div>
    </div>
</div>
<div class="cell">
    <div class="bar" style="margin-left: 130px; width: 100px;">
        <div class="bar-arrow">
            <div class="arrow-connector critical"
                style="height: 80px; width: 92px; right: -13px"
            ></div>
        </div>
    </div>
</div>

CSS

.cell {
    border: 1px dashed #cccccc;
    width: 300px;
    height: 16px;
    padding: 7px;
}
.bar {
    position: relative;
    height: 16px;
    background: #cccccc;
}

.arrow-connector {
    /* four params to position respectively parent element */
    bottom: 11px;    
    right: -7px;     
    width: 15px;    
    height: 10px;  
    /******************************/
    position: absolute;
    border-top: 2px solid #8cc;
    border-right: 2px solid #8cc;
    border-top-right-radius: 4px;
}
.arrow-connector:before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -12px;
    right: -6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 12px solid #8cc;
}
.arrow-connector { border-color: #8cc }
.arrow-connector:before { border-top-color: #8cc }
.arrow-connector.critical { border-color: #ff8888; }
.arrow-connector.critical:before { border-top-color: #ff8888; }

/*****************************************************/
.bar-arrow {
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    bottom: 0;
}

/************* NEW CONNECTOR *****************/
/* positioning  */