Google 对话框箭头效果

最新推荐文章于 2021-01-21 20:00:33 发布

iteye_3352

最新推荐文章于 2021-01-21 20:00:33 发布

阅读量115

点赞数

分类专栏： css 文章标签： html css 框箭头气泡

本文链接：https://blog.csdn.net/iteye_3352/article/details/82646913

版权

css 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

[img]http://dl2.iteye.com/upload/attachment/0114/8654/57ba948c-d023-34d2-8c88-d3bf86545a95.png[/img]
[size=x-large]
要实现这种效果注意点：

1. height = 0; width = 0;
2. 理解：

border-top
border-left
border-right
border-bottom

3.
用2个div重叠，
前面的div 部分遮盖后面的 div，
只显示部分边框效果。[/size]

[img]http://dl2.iteye.com/upload/attachment/0114/8664/24158ee5-9890-3ef6-b2a8-c79db3dc3b2a.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0114/8666/fb0be51c-4202-3bb4-a3d0-f0b487e09995.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0114/8668/cb537a72-ece8-394c-a6e6-9d20aae85ee2.png[/img]



<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
    .gb_bb{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #ccc;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 36px;
            position: absolute;
            left: 6.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }

    .gb_bc{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color:white;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 37px;
            position: absolute;
            left: 6.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }
</style>
</HEAD>
<BODY>
<div class="gb_bb"></div>
<div class="gb_bc"></div>
<BODY>
</HTML>

[img]http://dl2.iteye.com/upload/attachment/0114/8673/8c1b06f0-b27c-3a6b-ad99-79b04806a16c.png[/img]


<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
    .gb_bb{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #ccc;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 36px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }

    .gb_bc{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color:white;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 37px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
    }

    .gb_ga {
            background: #fff;
            border: 1px solid #ccc;
            border-color: rgba(0,0,0,.2);
            -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
            box-shadow: 0 2px 10px rgba(0,0,0,.2);
            outline: none;
            overflow: hidden;
            position: absolute;
            left: 5px;
            top: 95px;
            -webkit-animation: gb__a .2s;
            animation: gb__a .2s;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -webkit-user-select: text;
            width:200px;
            height:150px;
            padding:15px;
            color:green;
            font-weight:bold;
    }


</style>
</HEAD>
<BODY>

<div style="margin:auto;width:900px;position:relative;">
    <div class="gb_bb"></div>
    <div class="gb_bc"></div>
    <div class="gb_ga">
        <h2>Hello,World!</h2>
        This is my first dialog window!
    </div>
</div>

<BODY>
</HTML>

=====================================================
=====================================================

使用 html5 ，可以使用 before 和 after 的css样式

来代替

    
    <div class="gb_bb"></div>
    <div class="gb_bc"></div>

但是在IE8中却呈现这种效果：

[img]http://dl2.iteye.com/upload/attachment/0115/3411/70259597-288c-3b27-9abf-99d9d19bb86d.png[/img]



<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>

    .gb_ga {
            background: #fff;
            border: 1px solid #ccc;
            border-color: rgba(0,0,0,.2);
            -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
            box-shadow: 0 2px 10px rgba(0,0,0,.2);
            outline: none;
            overflow: hidden;
            position: absolute;
            left: 5px;
            top: 95px;
            -webkit-animation: gb__a .2s;
            animation: gb__a .2s;
            -webkit-border-radius: 2px;
            border-radius: 2px;
            -webkit-user-select: text;
            width:200px;
            height:150px;
            padding:15px;
            color:green;
            font-weight:bold;
    }

    #con_html5:before{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: #ccc;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 36px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
        content:"";
    }

    #con_html5:after{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color:white;
            border-style: dashed dashed solid;
            border-width: 30px;
            top: 37px;
            position: absolute;
            left: 46.5px;
            z-index: 1;
            height: 0;
            width: 0;
        content:"";
    }


</style>
</HEAD>
<BODY>
<div style="margin:auto;width:900px;position:relative;" id="con_html5">
    <div class="gb_ga">
        <h2>Hello,World!</h2>
        This is my first dialog window!
    </div>
    <div></div>
</div>
</BODY>
</HTML>

==================================================================

[size=large][b]使用 before, after 的菜单下拉效果：[/b][/size]

[img]http://dl2.iteye.com/upload/attachment/0116/1677/af5dee57-4a21-335c-bb15-f07b01e4ed71.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0116/1679/0960aae6-e8ac-3707-86a1-a30c02770fb8.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0116/1681/e34b9f19-488c-3a1e-adc3-d3413783ab4a.png[/img]

[img]http://dl2.iteye.com/upload/attachment/0116/1683/27a5ad0a-8c83-3c64-b953-b11c4d617772.png[/img]

-

iteye_3352

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google 对话框箭头效果

[img]http://dl2.iteye.com/upload/attachment/0114/8654/57ba948c-d023-34d2-8c88-d3bf86545a95.png[/img][size=x-large]要实现这种效果注意点：1. height = 0; width = 0;2. 理解：border-topborder-leftborde...
复制链接

扫一扫