Search code examples
htmlcssbackground-imagelinear-gradients

Set <tr> linear-gradient from right to left

I want to set tr background-color based on percentage. So I used background-image: linear-gradient(green, green) style for my tr. The problem is background-image start from left and I want to fill color from right to left. This is my style:

.table-row {
  background-image: linear-gradient(green, green);
  background-size: 24%;
  background-repeat: no-repeat;
}

How can I solve it? Working jsfiddle https://jsfiddle.net/h8vLd4sq/

Solution

  • u can add degree to set rotation https://jsfiddle.net/4mLdozyp/1/

       .table-row {
     background-image: linear-gradient(-90deg,green 33%, white 0%);
     background-repeat: no-repeat;
}