CSS实现气泡式对话框

转自 既是安安

气泡式的对话框

效果图如下：

之于上面的那个角角，就是之前说过的山顶角

圆角边框

再看结构代码：

<div class="main">
        <b class="b1"></b>
        <b class="b2"></b>
        <b class="b3"></b>
        <b class="b4"></b>
        <div class="content">
            <span class="font-left">“</span>
                <span class="font-right">”</span>
            <p>The farthest distance way in the world is the love between the bird and fish.</p>
                <p>One is flying in the sky,the other is looking upon into the sea.</p>
                <p class="translation">---jsann</p>
        </div>
        <b class="b5"></b>
        <b class="b6"></b>
        <b class="b7"></b>
        <b class="b8"></b>
</div>

根据这个结构，我们只要让上半部分的b标签的margin逐渐梯度减小，小半部分的b标签反之并且适当的使用边框，然后将溢出部分隐藏，比如说这样：

.main
{
    width:400px;
}
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8
{
    height:1px;
    overflow:hidden;
    display:block;
}
.b1,.b8
{
    height:0px;
    margin:0 5px;
}
.b1
{
    border-bottom:#CCC solid 1px;
}
.b8
{
    border-top:#CCC solid 1px;
}
.b2,.b3,.b4,.b5,.b6,.b7
{
    border-left:#CCC solid 1px;
    border-right:#CCC solid 1px;
}
.b2,.b7
{
    margin:0 3px;
    border-width:2px;
}
.b3,.b6
{
    margin:0 2px;
}
.b4,.b5
{
    margin:0 1px;
    height:2px;
}
.b2,.b3,.b4,.b5,.b6,.b7,.content
{
    background-color:#EEE;
}
.content
{
    border-left:solid #CCC 1px;
    border-right:solid #CCC 1px;
}

气泡式对话框的全部源码如下（如需DEMO，请狠狠的点击

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bloukk</title>
<style type="text/css">
*
{
    padding:0;
    margin:0;
    font-size:12px;
}
body
{
    padding:50px;
}
 
/* Begin */
.arrow
{
    position:relative;
    width:20px;
    height:20px;
    margin: 0 0 0 15px;
}
.arrow .arrow_border,.arrow .arrow_content
{
    width:0;
    height:0;
    overflow:hidden;
    border-width:10px;
    border-style:dashed dashed solid dashed;
}
.arrow .arrow_border
{
    border-color:transparent transparent #CCCCCC transparent;
}
.arrow .arrow_content
{
    border-color:transparent transparent #EEEEEE transparent;
    position:absolute;
    top:1px;
}
.main
{
    width:400px;
}
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8
{
    height:1px;
    overflow:hidden;
    display:block;
}
.b1,.b8
{
    height:0px;
    margin:0 5px;
}
.b1
{
    border-bottom:#CCC solid 1px;
}
.b8
{
    border-top:#CCC solid 1px;
}
.b2,.b3,.b4,.b5,.b6,.b7
{
    border-left:#CCC solid 1px;
    border-right:#CCC solid 1px;
}
.b2,.b7
{
    margin:0 3px;
    border-width:2px;
}
.b3,.b6
{
    margin:0 2px;
}
.b4,.b5
{
    margin:0 1px;
    height:2px;
}
.b2,.b3,.b4,.b5,.b6,.b7,.content
{
    background-color:#EEE;
}
.content
{
    border-left:solid #CCC 1px;
    border-right:solid #CCC 1px;
    padding:25px;
    position:relative;
}
.content span
{
    font-family:"宋体";
    font-size:72px;
    color:#CCCCCC;
    position:absolute;
}
.content span.font-left
{
    top:-10px;
    left:-30px;
    _left:-55px;/* 为了兼容IE6.0 */
}
.content span.font-right
{
    bottom:-45px;
    right:-30px;
}
/* End */
 
.content p
{
    text-indent:2em;
}
.content p.translation
{
    text-align:right;
    font-style:italic;
}
</style>
</head>
<body>
    <div class="arrow">
        <div class="arrow_border"></div>
        <div class="arrow_content"></div>
    </div>
    <div class="main">
        <b class="b1"></b>
        <b class="b2"></b>
        <b class="b3"></b>
        <b class="b4"></b>
        <div class="content">
            <span class="font-left">“</span>
            <span class="font-right">”</span>
            <p>The farthest distance way in the world is the love between the bird and fish.</p>
            <p>One is flying in the sky,the other is looking upon into the sea.</p>
            <p class="translation">---jsann</p>
        </div>
        <b class="b5"></b>
        <b class="b6"></b>
        <b class="b7"></b>
        <b class="b8"></b>
    </div>
</body>
</html>

 

转自 即是安安http://www.jsann.com/post/CSS_to_achieve_bubble-up_dialog_box.html

转自 既是安安

posted @ 2012-06-04 17:32  kumat  阅读(2931)  评论(0)  编辑  收藏  举报