纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

Posted stono

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框相关的知识,希望对你有一定的参考价值。

纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

学习了:https://blog.csdn.net/u012688910/article/details/41856895

 源码膜拜:

<body>
    <div class="demo"></div>
</body>

 

.demo{
                background-color: gray;
                height: 100px;
                position: relative;
                width: 100px;
            border:2.75px solid red;
            }
        .demo:after,.demo:before{
            content:‘‘;
            position:absolute;
        }
        .demo:after{
            //height:20px;
            //width:20px;
            //background:yellow;

            //border:10px  solid lightgreen;
            border:10px  solid transparent;
            border-top-color:gray;
            top:100px;
            left:20px;
        }        
            .demo:before{
            //height:30px;
            //width:30px;
            //background:green;

            //border:15px solid red;
            border:15px solid transparent;
            border-top-color:red;
            top:100px;
            left:15px;
        }    

 

以上是关于纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框的主要内容,如果未能解决你的问题,请参考以下文章

纯CSS气泡框实现方法探究

纯CSS气泡框实现方法探究

手机端实现Tooltip (Hover)

怎么用纯CSS制作带小三角的tooltip提示框

js实现短暂提示框

使用CSS在我的工具提示中添加小底部箭头