创建向下箭头，如gmail标签，与CSS和/或jquery所选标签颜色形成对比。

Question

我正在尝试为我正在开发的系统复制gmail标签功能。我正在使用jQLable插件来“显示”标签，但是我们试图实现的特性是：

当用户悬停在标签的“颜色框”上时，会出现一个向下箭头/三角形，与该颜色框的背景形成很好的对比。问题是你是怎么做的？

是否有任何jquery插件可以帮助您这样做，或者它可以通过纯CSS完成？

我查看了gmail页面的源代码，看起来这个三角形是一个unicode字符，如下所示：

<div class="p8" style="">▼</div>

只需复制粘贴三角形，似乎甚至没有在浏览器上呈现它:) -我甚至输入了unicode字符代码，但也没有运气。

然后我创建了一个三角形- div，并将它完全定位在我想要的位置，但是我为它创建了一个额外的div，但是上面的代码似乎将三角形作为文本！它把我弄糊涂了！

所以我要找的是：

1. 有没有一种方法可以让三角形显示出来，而不需要创建额外的div并使用它的样式，就像上面gmail页面的代码片段一样？也就是说，我遗漏了一个特殊的字符代码吗？
2. 如何使三角形的‘颜色’与背景形成对比？有没有jquery插件(我猜纯CSS在这里是行不通的，对吧？)例如，如果用户选择黑色标签颜色，则该三角形更好地显示为较浅的颜色--如果将三角形预设为黑色，则该三角形将不可见。

在谷歌上搜索类似的结果，结果很奇怪。似乎我需要人类的回应

更新:上面的 #1已被解析并运行良好。使用多个编辑器是一个问题。然而，能够将箭头与背景‘对比’的#2仍然是“未解决的”:(

Answer 1

虽然花了好长一段时间，但第二部分仍然没有答案。然而，我偶然发现了一个潜在的解决方案。该解决方案类似于www.colorschemedesigner.com上的“补体”色轮。

基本算法：

1. 将RGB转换为HSV
2. 在HSV颜色空间中计算补码(似乎有常见的标记)
3. 将值转换回RGB

这将确保补语总是与背景形成对比。

我不确定是否有任何解决方案，但我想我将用这个来标记它作为一个答案。如果您在上面的链接上使用颜色轮，它似乎解决了我的problem...you，可能想自己尝试一下:)

Answer 2

回答第一个问题:您可以呈现该箭头，但您的文档必须是UTF-8 (在编辑器中选择编码)，并且还必须在代码中指定如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...

希望这能有所帮助。干杯

Answer 3

我似乎能够让它呈现得很好：http://jsfiddle.net/mcPbD/ --我不知道是什么引起了您的问题--除非我仍然没有正确地理解真正的问题是什么。