CSS3 倒圆角

Question

有没有办法在 CSS3 中做一个倒圆角，类似于下面（粗略）图中的左下角？

/-------\
|       |
|       |
|       |
| ______/
|/ <---The left side is flush (straight), the slant should be rounded

也许 border-radius 可以与这种技术结合使用？

编辑：我不是在寻找语音气泡，而是在寻找一种使左下角点的右侧弯曲的方法。

Answer 1

好吧，这纯粹是疯狂，但肯定有办法实现这一点:-) 不是跨浏览器，但让我们看看：

我们的标记：

<div id="bubble">
    <p>This is madness!</p>
</div>

我们的 CSS：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;/* well, madness it is! */
    }
#bubble:before {
    content:'';
    border:20px solid;
    border-color:#fff transparent transparent;
    position:absolute;
    top:110px;
    left:25px;
    z-index:2;
}
#bubble:after {
    content:'';
    border:20px solid;
    border-color:#000 transparent transparent;
    position:absolute;
    top:111px;
    left:25px;
    z-index:1;
}

结果：
http://jsfiddle.net/MrLWY/

我只在 Firefox 3.6.3 中测试过这个，但是这个想法很清楚:-)

这里有两个：

#bubble {
    width:200px;
    height:100px;
    border:1px solid #000;
    position:relative;
    -webkit-border-radius:20px 20px 20px 0;
    -moz-border-radius:20px 20px 20px 0;
    border-radius:20px 20px 20px 0;
}
    #bubble p {
        margin: 1em;
        font-family:Comic Sans MS;
    }
#bubble:before {
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    border-left:1px solid #000;
    position:absolute;
    top:100px;
    left:-1px;
}
#bubble:after {
    content:'';
    -webkit-border-radius:20px 0 0 0;
    -moz-border-radius:20px 0 0 0;
    border-radius:20px 0 0 0;
    border:solid #000;
    border-width:1px 0 0 1px;
    width:20px;
    height:19px;
    position:absolute;
    top:100px;
    left:0;
}

结果： http://jsfiddle.net/ajeN7/

也许这可以通过多种方式增强：

• 让它跨浏览器（至少+webkit和opera）
• 它可以在IE中工作，无需舍入，不过，在类似的帮助下 http://code.google.com/p/ie7-js/（为了使生成的内容正常工作）。
• 了解它如何在灵活的高度下工作。
• 更改字体系列声明:-)

Answer 2

我还不能发表评论，但是这里有一个新的答案（关于 Gryzzlys 的答案）：

Gryzzlys 的第一个示例没有处理不同的背景颜色（对于背景和气泡）。

但第二个却是这样。这是应用背景颜色的示例：

http://jsfiddle.net/tGnfb/

（我还添加了边框 - radius 属性，以便为 Firefox 以外的其他浏览器渲染边框）。

Answer 3

这样就达到了FF中的效果。对其他浏览器使用适当的 border-radius 变体。
本质上，您使用 3 div 系统，其中一个系统的背景颜色相同。
仅适用于单色背景。

<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>

还有CSS：

body
    {
    background-color:red;
    }

.top
    {
    display: block;
    width: 200px;
    height: 50px;
    background-color:white;
    padding:5px;

    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    }

.bottom
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: white;    
    }

.bottom2
    {
    display: block;
    width: 20px;
    height: 20px;
    background-color: red;  
    -moz-border-radius-topleft:20px;
    }

Answer 4

如果您想实现那种外观（语音气球），最好只使用图像:)

Answer 5

有多种方法可以仅使用 CSS 来解决此问题。我决定使用一种用于选项卡的技术 - 但可以很容易地适应语音气泡。

我在这里介绍了如何在 CSS 中制作 Inverse Border Radius 的基本示例（此处）。这使用了边框大小的技巧来使用内部，您可能需要进行一些定位才能使其正常工作，但是正如您所看到的，这是可能的。