带箭头的提示框样式

做提示框的箭头时可以用以下方法：

HTML：

<span class="form-error">输入错误！<s class="dec1">◆</s><s class="dec2">◆</s></span>

CSS：

.form-error{
    position: absolute;
    right: 0;
    top: -35px;
    padding: 0px 5px 0px 10px;
    border: 1px solid #E2E2E2;
    background: #FFFFFF;
    color: #ff721a;
    line-height:24px;
    z-index: 999;
    display: none;
}
.form-error s{
    font-family: simsun;
    font-size: 16px;
    height: 19px;
    right: 10px;
    line-height: 21px;
    position: absolute;
    text-decoration: none;
    top: 15px;
    width: 17px;
}
.form-error s.dec1{
    color: #E2E2E2;
}
.form-error s.dec2{
    color: #fff;
    top: 14px;
}

思路：

s标签中是两个菱形符号，通过对菱形颜色值设定和绝对位置的定位来实现箭头。其他位置的箭头调整定位位置即可。

如果文字前需要加图标，可以在form-error里增加背景图片，也可以在文字前加img标签，再调整位置即可。

转载于:https://www.cnblogs.com/sakura-panda/p/5166037.html