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

html

大写锁定已打开
     ◆
     ◆
 

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