CSS 3 - zaokrąglone narożniki po i przed stanami

Question

Mam mały problem z CSS 3, mianowicie stworzyłem taki obiekt z pojedynczym przedmiotem. Oto obraz tego, co chcę osiągnąć:

Oto co ja:

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:

<div id="talkbubble"></div>​ 

I jsFiddle demo

Jak zaokrąglić kąt między dwiema częściami?

Answer 1

Krótka odpowiedź: nie możesz.

Udało Ci się utworzyć pudełko : po element DIV, ale jeśli zaczniesz wprowadzać tekst do DIV, nie "przepłynie" do dolnej sekcji.

Aby osiągnąć cel, do którego dążysz w CSS3, potrzebujesz co najmniej 3 elementów DIV i efektów przezroczystości, a problem z przepełnieniem tekstu będzie nadal występował.

Answer 2

Zrobione z here informacje można uzyskać w ten sposób:

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: 95%; 
    width: 228px; 
    height: 62px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px; 
} 
#talkbubble:after 
{ 
    content:""; 
    position: absolute; 
    top:100%; 
    left:228px; 
    background:-webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 10px, white 10px); 
    width: 10px; 
    height: 10px; 
}​ 

http://jsfiddle.net/uCRMQ/2

// Tylko cień w tle nie działają. Teraz działa cień tła (w tym rozmiarze).

Lg
warappa

Answer 3

Worx jak czar: http://jsfiddle.net/42DJh/7/

prostu zastąpić to:

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