Question

我正在尝试展示

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

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

<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会提出这样的要求？

提前致谢。

Answer 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/

中心div的可变宽度，左侧和左侧固定。右边的div有透明的圆角图像

1 个答案: