带箭头的提示框样式

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

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

posted @ 2016-01-28 14:02  秋月白  阅读(835)  评论(0编辑  收藏  举报