Question

这个想法是当人们未能填写像讲话气泡那样显示的必填字段时，会出现无效的错误提示。因此箭头图像显示在文本的中心和下方，并指向他们错过的字段。

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

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

问题：

是否有纯CSS解决方案？

如果不是（我怀疑没有）解决这个问题的最简洁方法是什么？我是否会使用add_filter来改变html以在工具提示周围放置一个div，然后我可以将bg图像添加到？用css“content：”，js解决方案？

Answer 1

在其他地方得到答案。除非有人能想到更好的事情，否则会接受。

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

通过绘制带边框的三角形而不是使用图像，可以很好地使用CSS（尽管通过内容添加内容：声明）。

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

在元素下的背景颜色和背景图象

1 个答案: