chefcurry7 chefcurry7 - 1 month ago 6
CSS Question

Fill half bar with color and end with rotated line

How can I create a vertically tilted line using css, like seen below?

enter image description here

Answer

Try playing with 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>