带箭头的提示框样式

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

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标签，再调整位置即可。