html – 仅限带有箭头和边框的CSS工具提示

发布时间：2020-12-14 23:20:49 所属栏目：资源来源：网络整理

导读：样式 .Tooltip { position: absolute; z-index:999; width:200px; height:57px; padding:20px; font-family: "Comic Sans MS",cursive; font-weight:bold; font-size:14px; color:rgba(21,139,204,1); text-align:justify; border-radius:10px; -webkit-bord

样式

.Tooltip {
    position: absolute;
    z-index:999;
    width:200px;
    height:57px;
    padding:20px;
    font-family: "Comic Sans MS",cursive;
    font-weight:bold;
    font-size:14px;
    color:rgba(21,139,204,1);
    text-align:justify;
    border-radius:10px;
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
    box-shadow: inset 0px 0px 5px 1px rgba(21,1);
        -webkit-box-shadow: inset 0px 0px 5px 1px rgba(21,1);
        -moz-box-shadow: inset 0px 0px 5px 1px rgba(21,1);
    background:#dbf3ff;
}
.Tooltip .ArrowWrap {
    position:absolute;
    margin-top:77px;
    margin-left:81px;
    height:18px;
    width:37px;
    overflow:hidden;
}
.Tooltip .ArrowWrap .ArrowInner {
    width:25px;
    height:25px;
    margin:-13px 0 0 6px;
    transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome,Safari,Opera */
    box-shadow: inset 0px 0px 5px 1px rgba(21,1);
    background:#dbf3ff;

}

JSFiddle Demo

说明

我希望我的工具提示箭头不是由工具提示寄存器引起的阻挡三角形,而是我在右图中显示的编辑后的Photoshop版本.

最佳答案

其他方法有框阴影和伪元素：

div{
    position:relative;
    width:200px;
    height:57px;
    padding:20px;
    border-radius:10px;
    background:#DBF3FF;
    box-shadow: inset 0px 0px 5px 1px rgba(21,1);
}
div:after{
    content:'';
    position:absolute;
    left:110px; bottom:-10px;
    width:20px; height:20px;
    background:inherit;
    transform:rotate(45deg);
    box-shadow: inset -5px -5px 5px -4px rgba(21,1);
}


另请注意：除非您对浏览器支持有非常具体的需求,否则box-shadows和border-radius不需要使用供应商前缀.


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!