中心 div 的可变宽度，固定的左右 div 具有透明的圆角图像答案

【问题标题】：Variable width for the center div with fixed left & right div having transparent rounded corners images中心 div 的可变宽度，固定的左右 div 具有透明的圆角图像
【发布时间】：2013-09-05 15:49:53
【问题描述】：

我正在尝试显示

可变宽度弹出窗口
具有圆角和透明边缘以匹配背景颜色。

起初我认为这是一个简单的圆角标记，但问题在于半径的透明背景和弹出窗口的可变宽度。

<css>
    .c-dialog-rc-tl, .c-dialog-rc-tc, .c-dialog-rc-tr,
    .c-dialog-rc-bl, .c-dialog-rc-bc, .c-dialog-rc-br {
        background-color: none;
        height: 10px;
    }
    .c-dialog-rc-tl, .c-dialog-rc-bl { 
        float:left;
        width:20px;
    }
    .c-dialog-rc-tl {
        background-position: 0 -30px;
        z-index:1005;
        position:absolute;
    }
    .c-dialog-rc-bl {
        background-position: 0 -43px;
        z-index:1004;
        position:absolute;
    }
</css>

<div class="c-dialog-rc-top">
    <div class="c-dialog-image c-dialog-rc-tl"></div>
    <div class="c-dialog-image c-dialog-rc-tc"></div>
    <div class="c-dialog-image c-dialog-rc-tr"></div>
</div>

我尝试了answer 的回复，但没有成功。请在jsfiddle查看代码。

如果问题不清楚，我会尽量提供尽可能多的信息，但请不要投反对票或删除问题。

有没有人解决过这类问题，或者知道更好的 div 布局或 css 来呈现这样的需求？

提前致谢。

【问题讨论】：

没有 cmets 吗？没人吗？

标签： css transparency html rounded-corners

【解决方案1】：

改变圆角的顺序是可行的，而且对 css 有一点改变。

<div class="c-dialog-rc-top">
    <div class="c-dialog-image c-dialog-rc-tl"></div>
    <div class="c-dialog-image c-dialog-rc-tr"></div>
    <div class="c-dialog-image c-dialog-rc-tc"></div>
</div>
<style>
    /* explaining here in short, please refer fiddle for full css */
    .c-dialog-rc-tl {float:left;}
    .c-dialog-rc-tr {float:right;}
    .c-dialog-rc-tc {overflow:auto}
</style>

链接到更新的小提琴：http://fiddle.jshell.net/zMtg7/5/

【讨论】：