滑动门效果的实现

滑动门

滑动门常常是用在导航栏中的一种效果，就例如聊天工具中的聊天框，会随着文字的增加而拉长，但是两侧的效果比如尖角并不会变形。

下面介绍两种实现思路

1，三盒子法

思路，将滑动门分成三块，左边放一个背景，右边放一个背景，中间的块用背景水平平铺
如下：

<div class="box">
    <div class="left"></div>
    <div class="center">天气晚来秋</div>
    <div class="right"></div>
</div>

 <style>
.left{
    width: 36px;
    height: 59px;
    float: left;
    background:  url("images/qipao-left.png") 0 0 no-repeat;
}

        .center{
            height: 59px;
            float: left;
            background:  url("images/qipao-center03_03.png") 0 0 repeat-x;
            line-height: 59px;
            padding-right: 12px;
        /*此处是为了让文字在聊天框中看起来是水平居中的，具体操作视情况而定*/
        }
.right{
    width: 20px;
    height: 59px;
    background:  url("images/qipao-right_03.png") 0 0 no-repeat;
    float: left;

}

    </style>

效果图为：

注意：当设置背景时，具体是要自己去修改图片，然后单独放进盒子里，还是使用背景定位，看自己的使用习惯。

嵌套法

• 外面那个盒子实现左侧图片效果
• 大盒子设置padding
• 里面那个盒子设置右侧图片效果
• 注意为了使盒子由文字内容撑开，转成行内块元素