Css 元素下方的背景色和背景图像

这个想法是为了让当人们没有填写必填字段时出现的无效错误提示像一个语音泡泡一样显示出来。因此箭头图像显示在文本的中心和下方，并将指向他们遗漏的字段

HTML:

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

.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');  
}

正如你所看到的，我有一个背景颜色和箭头图像需要坐在元素的中间和下面，但是，当然，如果你使用背景位置来定位它，图像是隐藏的，因为它不能在元素本身之外溢出。这将是很容易的，如果我可以很容易地编辑HTML，但我宁愿不这样做，因为我正在使用一个插件，并希望能够免费更新插件在未来

问题：

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

.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');  
}

有没有纯CSS解决方案

---

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

在别处得到了答案。除非有人能想出更好的办法，否则我会接受

使用CSS（尽管使用content:declaration添加内容）绘制一个带边框的三角形，而不是使用图像，这一点非常有效

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;
}

---

背景图像

不能超出元素边界。从我的角度看，箭头看起来很俗气，为什么不在遗漏的元素上加上redish背景和红色边框呢。小提琴并不能代表它的实际外观，我也不是在寻找其他设计方案，但无论如何还是要感谢你。