码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-06-03 12:20:45      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:idt   after   yellow   before   back   class   tran   relative   tps   

纯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提示框加个边框

标签:idt   after   yellow   before   back   class   tran   relative   tps   

原文地址:https://www.cnblogs.com/stono/p/9128269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!