<h2>Resize the below div</h2>
<div class="box" ></div>

.box {
  height:50px;
  margin:10px;
  overflow:hidden;
  resize:horizontal;
  background:
   linear-gradient(purple,purple) 0 /max(0px,100px - 100%) 1px,
   linear-gradient(blue,blue)     0 /max(0px,300px - 100%) 1px,
   linear-gradient(green,green)   0 /max(0px,500px - 100%) 1px,
   red;
}

/*
 I am using "linear-gradient(green,green) instead of linear-gradient(green 0 0) 
 for better browser support "
*/