CSS3倒圆 Angular

Question

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

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

也许 border-radius 可以与 this technique 结合使用？

编辑:我不是在寻找对话泡泡，而是在寻找一种使左下角点的右侧 flex 的方法。

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/ (为了让生成的内容发挥作用)。
• 了解它如何使用灵活的高度。
• 更改字体系列声明:-)