Закрасить половину div

div { 
  width: 200px; 
  height: 200px; 
  border: 1px solid; 
  background: linear-gradient(to right, red 50%, transparent 50%); 
}

<div></div>

div { 
  width: 200px; 
  height: 200px; 
  border: 1px solid; 
  position: relative; 
} 
 
div::before { 
  content: ""; 
  position: absolute; 
  width: 50%; 
  height: 100%; 
  z-index: -1; 
  background: red; 
}

<div></div>

div { 
  width: 200px; 
  height: 200px; 
  border:1px solid #000; 
  box-shadow: inset 100px 0 #f00; 
}

<div></div>