Variable width for the center div with fixed left & right div having transparent rounded corners images

Question

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.

Answer 1

Changing the order of the rounded corners worked and with a little bit of change in 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>

Link to updated fiddle : http://fiddle.jshell.net/zMtg7/5/