Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
248 views
in Technique[技术] by (71.8m points)

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

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)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...