CSS3倒圆角

Question

有没有办法在CSS3中做一个倒圆角,有点像下面(粗略)图中的左下角？

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

也许边界半径可以与这种技术相结合？

编辑:我不是在寻找一个讲话泡泡,而只是一种弯曲左下角点右侧的方法.

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/之类的东西(为了使生成的内容能够工作).
• 了解它如何在灵活的高度下工作.
• 更改font-family声明:-)

Answer 2

我还不能评论,但所以这是一个新的答案(关于Gryzzlys的回答):

Gryzzlys的第一个例子没有处理不同的背景颜色(背景和气泡).

但第二个确实如此.以下是应用背景颜色的示例:

http://jsfiddle.net/tGnfb/

(我还添加了border-radius属性,以便为Firefox之外的其他浏览器渲染边框).