Replace with css outline color: invert

Question

Once upon a time, with outdated browsers (chrome38) people could create boxes ...

You could use outline-color: invert to select a color that was completely opposite to the background.

Today, such a wonderful feature no longer exists :( I have an idea for me that just wants to display boxes with borders of the opposite background color?

(today chrome (39) computes outline-color: invert to outline-color:transparent .

before that, outline-color: invert mapped to outline-color: rgb(255,255,255) on the black edge.)

Thanks for your ideas.

Answer 1

Perhaps this is a trick for you?

 .background { display: inline-block; margin: 10px; padding: 20px; } .box { border: 3px solid white; height: 100px; width: 160px; } .invert { mix-blend-mode: difference; } 

 <div class="background" style="background: #ff0000"> <div class="box invert"></div> </div> <div class="background" style="background: #000000"> <div class="box invert"></div> </div> <div class="background" style="background: #ffffff"> <div class="box invert"></div> </div> 

http://codepen.io/Frikki/pen/BNpKYb