CSS3 Перевернутый закругленный угол

Question

Есть ли способ сделать перевернутый округленный угол в CSS3, что-то примерно похоже на нижний левый угол в (грубом) рисунке ниже?

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

Возможно, радиус границы может быть объединен с this technique?

Редактировать: Я не ищу речевого пузыря, а всего лишь способ кривой правой части точки в левом нижнем углу.

Answer 1

Ну, это чистое безумие, но, конечно, есть способы для достижения этой цели :-) не кросс-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/ (для того, чтобы сгенерированный контент работал).
• , чтобы узнать, как он может работать с гибкой высотой.
• изменить семейство шрифтов декларации :-)

Answer 2

если вы пытаетесь достичь такой вид (речь воздушный шар), лучше всего использовать изображение для этого :)

Answer 3

Это достигается эффект в 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; 
    } 

Answer 4

Я не могу комментировать еще, но так вот новый ответ (в отношении Gryzzlys ответа):

Gryzzlys первый пример не обработал другой фон цвета (для фона и пузыря).

Но второй делает.Вот пример с цветом фона применяется:

http://jsfiddle.net/tGnfb/

(Я также добавил свойство границы радиуса так, что он будет отображать рамки для других браузеров, чем Firefox).

Answer 5

Есть способы решить эту проблему, используя только CSS. Я решил использовать технику для вкладок - но ее можно легко адаптировать для речевых пузырей.

Я расскажу здесь, как сделать Inverse Border Radius in CSS (here). Это использует трюк с размером Border для использования внутри, вам может потребоваться некоторое позиционирование, чтобы заставить его работать правильно, но, как вы можете видеть, это возможно.