html - How to change the color of <div> Element depending on its height or width?

Question

So what i wanna do is change the Color of an div Element depending on its height.

For example: If the div has a height of <= 20% i want it to be green, if its above 20% it should be blue.

I want to achieve this only using css (if this is possible)

Answer 1

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>