纯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;
        }    
原文地址:https://www.cnblogs.com/stono/p/9128269.html