CSS3倒圆角

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

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

/-------\
|       |
|       |
|       |
| ______/
|/如果你想达到这种效果（一个语音气球），最好只使用一个图像：）
好吧，这纯粹是疯狂，但肯定有办法做到这一点：-）不要浏览，但让我们看看：

我们的加价：

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

结果是：

我只在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;
}

结果是：

或许可以通过多种方式增强这一点：


使其跨浏览器（+至少是webkit和opera）
不过，它可以在IEs中工作，而无需进行取舍，只要有类似的帮助（为了使生成的内容正常工作）
了解它如何在灵活的高度下工作
更改字体系列声明的步骤：-）
这在FF中实现了效果。为其他浏览器使用适当的
边框半径
变体。
基本上，您使用3
div
系统，一个具有相同背景颜色的系统。
仅适用于平面颜色的背景

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

我还不能评论，但这里有一个新的答案（关于格里兹利的答案）：

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

但第二个是。下面是一个应用背景色的示例：


（我还添加了border radius属性，以便它能够为Firefox以外的其他浏览器呈现边框）
 您可以通过使用CSS来解决这个问题。我已经决定使用标签技术，但可以很容易地适应语音气泡

我在这里介绍了一个基本的例子，说明如何制作一个。这使用了一个与边框大小有关的技巧来使用内部，您可能需要进行一些定位，以使其正常工作，但正如您所看到的那样。
使用图像并不是一个问题，但我特别想问的是，是否可以使用CSS3。+1谢谢gryzzly。这不是我想要的，但这是一种非常酷的技术。请看我的编辑。非常好！非常感谢。不过，我不知道你为什么要换喜剧演员。这是网络上最漂亮的字体之一我把它改编成填充的rgba颜色。。。它在firefox和webkit中工作这是一个绝妙的想法，但不幸的是，如果页面有背景图像，它将不起作用。我也可以推荐本教程，其中显示了用于选项卡的反向边框：
<div class="top">some text here</div>
<div class="bottom"><div class="bottom2"></div></div>

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;
    }