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

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

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

Возможно, border-radius можно комбинировать с этой техникой?

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


css css-shapes
person VirtuosiMedia    schedule 29.05.2010    source источник
comment
Я также могу порекомендовать это руководство, в котором показаны перевернутые границы, используемые для вкладок: css-tricks.com/better-tabs-with-round-out-borders   -  person Peter Ehrlich    schedule 28.04.2012

Ответы (5)


arrow_upward
16
arrow_downward

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

Наша наценка:

<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/

Возможно, это можно улучшить разными способами:

  • сделать его кроссбраузерным (+вебкит и опера, по крайней мере)
  • он может работать в IE без округлений, хотя с помощью чего-то вроде этого http://code.google.com/p/ie7-js/ (чтобы сгенерированный контент работал).
  • чтобы узнать, как это может работать с гибкой высотой.
  • чтобы изменить объявление семейства шрифтов :-)
person Misha Reyzlin    schedule 29.05.2010
comment
+1 Спасибо гризли. Это не совсем то, что я ищу, но это очень крутая техника. Пожалуйста, смотрите мое редактирование. - person VirtuosiMedia; 30.05.2010
comment
Очень хорошо! Благодарю вас! Однако я не уверен, почему вы хотите изменить Comic Sans. Это один из самых красивых шрифтов в Интернете. ;-) - person VirtuosiMedia; 30.05.2010
comment
Я адаптировал его для работы с заполненными цветами rgba... он работает в firefox и webkit jsfiddle.net/XpghH - person jwal; 11.01.2011

arrow_upward
6
arrow_downward

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

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

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

http://jsfiddle.net/tGnfb/

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

person MPV    schedule 03.02.2011
comment
Это блестящая идея, но, к сожалению, она не сработает, если на странице есть фоновое изображение. - person thdoan; 18.10.2012

arrow_upward
3
arrow_downward

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

arrow_upward
0
arrow_downward

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

person corroded    schedule 29.05.2010
comment
Для этого не проблема использовать изображение, но я специально спрашиваю, возможно ли это с помощью CSS3. - person VirtuosiMedia; 29.05.2010

arrow_upward
0
arrow_downward

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

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

person Jon Mifsud    schedule 14.07.2012