css - 元素下方的背景颜色和背景图片

Question

我们的想法是让当人们未能填写必填字段时出现的无效错误提示像对话泡泡一样出现。所以箭头图像显示在文本的中心和下方，并且会指向他们错过的字段。

Fiddle here

HTML:

<span class="wpcf7-not-valid-tip">Please fill the required field.</span>

CSS:

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
        background-position: 0 0; 
        background-repeat: no-repeat;
        background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png');  
}

如您所见，我有背景色和箭头图像，需要位于元素的中间和下方，但是，当然，如果您使用 background-position 定位它，图像将被隐藏，因为它不能溢出到元素本身之外。如果我可以轻松编辑 HTML，这会很容易，但我不想这样做，因为我正在使用插件，并且希望将来可以自由更新插件。

问题:

是否有纯 CSS 解决方案？

如果没有(我怀疑没有)解决这个问题的最干净的方法是什么？我会使用 add_filter 来更改 html 以在工具提示周围放置一个 div，然后我可以将 bg 图像添加到其中吗？带有 css“content:”的 js 解决方案？

Answer 1

在别处得到答案。将接受，除非有人能想到更好的办法。

http://jsfiddle.net/D2KFX/2/

通过绘制带边框的三 Angular 形而不是为其使用图像，使用 CSS(尽管添加的内容带有 content: 声明)可以完美地工作。

CSS

.wpcf7-not-valid-tip {
        background: red;
        color: white;
        padding: 10px;
        width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
    position: relative;
}
.wpcf7-not-valid-tip:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 0, 0, 0);
    border-top-color: red;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}