Loading

纯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;
        }

 

posted @ 2018-06-03 10:50  stono  阅读(166)  评论(0)  编辑  收藏  举报