中心div的可变宽度，左右固定div具有透明圆角图像(Variable width for the center div with fixed left & right div having transparent rounded corners images)

 我正试图展示 
 
 
 
 一个可变宽度的弹出窗口 
 
 
 将具有透明边缘的圆角以匹配背景颜色。 
 
 
 首先我认为这是一个简单的圆角标记，但问题是半径的透明背景和弹出窗口的可变宽度。 
 
<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>
 
 我尝试了这个答案的回复，但没有奏效。 请参阅jsfiddle的代码。 
 
 如果问题不明确，我会尝试提供尽可能多的信息，但请不要低估或删除问题。 
 
 有没有人解决过这种问题，或者知道更好的div布局还是css会提出这样的要求？ 
 
 提前致谢。 

I'm trying to display 
 
 
 
a variable width popup 
 
 
that will have rounded corners with transparent edges to match the background color.
 
 
First I thought it was a simple rounded corner markup, but then the problem was with transparent background for the radius and the variable width of the popup.
 
<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>
 
I tried the replies of this answer but didn't work. Please see the code at jsfiddle.
 
I'll try to provide as much as information if the question is not clear but please don't downvote or delete the question. 
 
Has anybody solved this kind of problem, or know a better div layout or a css that will render such a requirement ?
 
Thanks in advance.

原文：https://stackoverflow.com/questions/18640792