chefcurry7 chefcurry7 - 6 months ago 38
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


Try playing with border

  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>