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>