大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

div+css样式如何实现带小三角的tooltips效果-创新互联

这篇文章将为大家详细讲解有关 div+css样式如何实现带小三角的tooltips效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站专注于企业成都全网营销推广、网站重做改版、盘龙网站定制设计、自适应品牌网站建设、H5技术商城系统网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为盘龙等各大城市提供网站开发制作服务。

 代码和效果图如下:



    
        
        
        
            .tooltips {
                position: relative;
                width: 300px;
                height: 80px;
                line-height: 60px;
                background: #D7E7FC;
                border-radius: 4px;
            }
            .arrow {
                position: absolute;
                color: #D7E7FC;
                width: 0px;
                height: 0px;
                line-height: 0px;
                border-width: 20px 15px 0;
                border-style: solid dashed dashed dashed;
                border-left-color: transparent;
                border-right-color: transparent;
                bottom: -20px;
                right: 50%;
            }
            .tooltips {
                position: relative;
                width: 300px;
                height: 80px;
                line-height: 60px;
                background: #D7E7FC;
                border: 1px solid #A5C4EC;
                border-radius: 4px;
            }
            .arrow {
                position: absolute;
                width: 0px;
                height: 0px;
                line-height: 0px;
                border-width: 20px 15px 0;
                border-style: solid dashed dashed dashed;
                border-left-color: transparent;
                border-right-color: transparent;
            }
            .arrow-border {
                color: #A5C4EC;
                bottom: -20px;
                right: 50%;
            }
            .arrow-bg {
                color: #D7E7FC;
                bottom: -19px;
                right: 50%;
            }
        
    
    
        
        
            
            
                                      
            
                     
    

效果展示图

div+css样式如何实现带小三角的tooltips效果

关于“ div+css样式如何实现带小三角的tooltips效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网页名称:div+css样式如何实现带小三角的tooltips效果-创新互联
分享URL:http://dzwzjz.com/article/ccdjdd.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP