CSS使右邊框對角線

Question

如何使用css創建垂直傾斜線，如下所示？

Answer 1

嘗試用border

.progressbar{ 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 10px; 
 
    background: #eee; 
 
} 
 
.progressbar > i{ 
 
    position: absolute; 
 
    width: 60%; 
 
    border-top: 10px solid #0bf;   /* same as parent height */ 
 
    border-right: 3px solid transparent; /* diagonality :) */ 
 
}

<div class="progressbar"><i></i></div>