美文网首页
css 手写带小三角的气泡提示框

css 手写带小三角的气泡提示框

作者: _信仰zmh | 来源:发表于2018-04-02 18:31 被阅读61次

html

<div class="caps-lock-css">大写锁定已打开
     <em>&#9670;</em>
     <span>&#9670;</span>
 </div>

css(至于位置,看自己项目自己调整)

/*caps lock 大写键盘锁定样式*/
.caps-lock-css{
    margin-left: 44px;
    border: 1px solid #ccc;
    height: 28px;
    width: 120px;
    line-height: 28px;
    padding-left: 10px;
    border-radius: 5px;
    margin-top: -2px;
}
.caps-lock-css em,.caps-lock-css span{
    display:block;
    width:30px;
    height:16px;
    font-size:30px;
    overflow:hidden;
    position:relative;
    margin-left:-5px;
}
.caps-lock-css em{
    margin-top:-41px;
    color:#ccc;
    font-style:normal;
}
.caps-lock-css span{
    margin-top:-14px;
    color:white;
}
效果图
QQ截图20180402183055.png

相关文章

网友评论

      本文标题:css 手写带小三角的气泡提示框

      本文链接:https://www.haomeiwen.com/subject/yybxhftx.html