css - 指向每行表格的箭头

Question

在我网站的注册表单中，我想为我的表单制作一个工具提示类的东西，但我想要一个从 css3 构造的箭头。我完全不知道如何做这种事情。

本质上，当 input:focus 时，一个三 Angular 形(使用 CSS3 呈现)将在过渡中向上或向下移动，以指向该输入文本字段。这可行吗？如何？谢谢。

我想完全使用 CSS，而不是 jQuery 或 JavaScript。我尽量避免使用 JavaScript，以免占用带宽。

Answer 1

您可以通过边框相对轻松地制作三 Angular 形。 This demo可能是我最喜欢的主题，它通过在 CSS 中创建聊天/工具提示气泡来实现。

不过，您可以获得比这更多的创意:http://jsfiddle.net/czuxH/

我不会太担心通过删除最少的 JavaScript 片段来节省带宽——它只是文本，适本地缩小和 gzip 压缩它确实不会占用太多带宽。此处您将需要 JS 来触发动画和定位箭头(尽管您可以使用 CSS3 动画来完成转换)。