CSS3倒圆角落

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

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

也许边界半径可以结合this technique？

编辑：我不是在寻找讲话泡泡，而只是一种曲线左下角右侧的方法。

来源

2010-05-29 VirtuosiMedia

我也可以推荐这个教程，它显示了倒置的边框，因为它们用于制表符：http://css-tricks.com/better-tabs-with-round-out-borders/ – 2012-04-28 14:16:38

好了，这是纯粹的疯狂，但肯定有办法做到这一点:-)不交叉browserly，但让我们看到：

我们加价：

<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和歌剧，至少）
它可以在IE浏览器，没有圆整，但在类似http://code.google.com/p/ie7-js/（为了生成内容的工作）的帮助下工作。
了解如何使用灵活的高度。
改变FONT-FAMILY声明:-)

来源

2010-05-29 19:30:37

+1感谢gryzzly。这不是我正在寻找的东西，但它是一种非常酷的技术。请参阅我的编辑。 – VirtuosiMedia 2010-05-29 22:06:12

拿两个：http://jsfiddle.net/ajeN7/ :-) – 2010-05-29 22:17:30

非常好！谢谢！不过，我不确定你为什么要改变漫画。它是网络上最漂亮的字体之一。 ;-) – VirtuosiMedia 2010-05-29 22:49:42

，如果你想达到那种样子的（谈话气球），最好只是用图像为:)

来源

2010-05-29 19:16:33 corroded

图像isn'这是一个问题，但我具体问是否可以使用CSS3。 – VirtuosiMedia 2010-05-29 19:27:39

这实现了在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; 
    }

来源

2010-05-29 22:18:50 nico

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

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

但第二个呢。下面是应用了背景颜色的例子：

http://jsfiddle.net/tGnfb/

（我还加边界半径属性，以便将呈现为其他浏览器比Firefox边界）。

来源

2011-02-03 12:47:26 MPV

这是一个绝妙的想法，但不幸的是，它不会工作，如果页面有一个背景图像。 – 10basetom 2012-10-18 07:54:22