Here is a trick with gradient background where you can rely on background-size and repeat. The idea is to eiher have a negative value of size (no coloration) or positive value and with the repeat you will have a full coloration.
Here is an example where I am defining 3 ranges: from 0 to 100px (orange), from 100px to 200px (blue), bigger than 200px (red).
I am setting the height manually but it can be set automatically by the content:
.box {
min-height:50px;
margin:10px;
border:1px solid;
background:
linear-gradient(red,red) left/100% calc(100% - 200px),
linear-gradient(blue,blue) left/100% calc(100% - 100px),
orange;
}<div class="box"></div>
<div class="box" style="height:120px"></div>
<div class="box" style="height:220px"></div>The same can work with width too (resize the screen to test):
.box {
min-height:50px;
margin:10px;
border:1px solid;
background:
linear-gradient(red,red) left/calc(100% - 800px) 100%,
linear-gradient(blue,blue) left/calc(100% - 600px) 100%,
orange;
}<div class="box"></div>We can expand the same trick to text coloration too:
.box {
min-height:50px;
margin:10px;
font-size:20px;
border:1px solid #000;
background:
linear-gradient(red,red) left/100% calc(100% - 200px),
linear-gradient(blue,blue) left/100% calc(100% - 100px),
orange;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}<div class="box"> I am an orange text</div>
<div class="box" style="height:120px"> I am a blue text</div>
<div class="box" style="height:220px"> I am a red text</div>Also to borders:
.box {
min-height:50px;
margin:10px;
border:5px solid transparent;
background:
/*Background coloration (color padding-box)*/
linear-gradient(red,red) padding-box,
linear-gradient(blue,blue) padding-box,
linear-gradient(orange,orange) padding-box,
/*Border coloration (color the border-box)*/
linear-gradient(purple,purple) border-box,
linear-gradient(green,green) border-box,
linear-gradient(#000,#000) border-box;
background-size:
100% calc(100% - 200px),
100% calc(100% - 100px),
100% 100%;
}<div class="box"></div>
<div class="box" style="height:120px"></div>
<div class="box" style="height:220px"></div>Finally, we can have border, text and background at the same time (Doesn’t work on Firefox due to a bug)
.box {
min-height:50px;
margin:10px;
font-size:25px;
border:5px solid transparent;
background:
/*Text coloration*/
linear-gradient(yellow,yellow) ,
linear-gradient(grey,grey) ,
linear-gradient(#fff,#fff),
/*Background coloration*/
linear-gradient(red,red),
linear-gradient(blue,blue),
linear-gradient(orange,orange),
/*Border coloration*/
linear-gradient(purple,purple),
linear-gradient(green,green),
linear-gradient(#000,#000);
background-size:
100% calc(100% - 200px),
100% calc(100% - 100px),
100% 100%;
-webkit-background-clip:
text,text,text,
padding-box,padding-box,padding-box,
border-box,border-box,border-box;
background-clip:
text,text,text,
padding-box,padding-box,padding-box,
border-box,border-box,border-box;
-webkit-text-fill-color: transparent;
color: transparent;
}<div class="box">some text here</div>
<div class="box" style="height:120px">some text here</div>
<div class="box" style="height:220px">some text here</div>For all the above we can have a coloration that depends on the height and the width together.
Here is an interactive demo:
.box {
padding:10px;
display:inline-block;
margin:10px;
font-size:20px;
resize:both;
overflow:auto;
border:1px solid;
background:
linear-gradient(green,green),
linear-gradient(red,red),
linear-gradient(blue,blue),
linear-gradient(orange,orange),
yellow;
background-size:
calc(100% - 400px) calc(100% - 300px),
calc(100% - 400px) calc(100% - 200px),
calc(100% - 200px) calc(100% - 100px),
calc(100% - 100px) calc(100% - 50px);
}<div class="box">resize me</div>