CSS 3 — закругленные углы в состояниях «после» и «до» ⇐ CSS

[Anonymous]

У меня небольшая проблема с CSS 3, а именно я бы создал такой объект с одним элементом.
Вот изображение того, чего я хочу достичь:


Вот что получилось Я:
CSS:

Код: Выделить всё

body{
background:grey;
padding:10px;
}
#talkbubble {
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
width: 590px;
height: 160px;
background: white;
position: relative;
border-radius:10px;
border-bottom-left-radius:0px;
}
#talkbubble:before {
box-shadow: 10px 10px 5px #deefe5;
content:"";
position: absolute;
background:white;
top: 100%;
width: 228px;
height: 62px;
border-bottom-left-radius:         10px;
border-bottom-right-radius:         10px;

}
#talkbubble:after{
content:"";
position: absolute;
top:100%;
left:228px;
border-top: 10px solid white;
border-right: 10px solid transparent;
background:white;

}​

HTML:

Код: Выделить всё

​

И демонстрация jsFiddle
Как закруглить угол между двумя частями?

Подробнее здесь: https://stackoverflow.com/questions/140 ... ore-states