1

我正在尝试显示

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

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

<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 来呈现这样的要求？

提前致谢。

4

1 回答 1

0

更改圆角的顺序是可行的，并且对 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/

于 2013-10-03T15:04:21.747 回答