Обратный граничный радиус

Question

Я хочу противоположный радиус границы, чтобы смайлик был грустным.

div.smile { 
    width: 200px; 
    height: 70px; 
    border: 10px solid #222; 
    border-top: 0; 
    background: rgba(0,0,0,0); 
    -moz-border-radius: 0 0 120px 120px/0 0 90px 90px; 
    -webkit-border-radius: 0 0 120px 120px 0 0 90px 90px; 
    border-radius: 0 0 120px 120px/0 0 90px 90px; 
    position: absolute; 
    bottom: 50px; 
    left: 38px; 
    box-shadow: 0 2px 0 rgba(255,255,255, 0.8); 
    -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8); 
    -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8); 
    } 

Вот скрипка ссылка:

http://jsfiddle.net/mayoung/2qBLF/

Answer 1

Самый простой способ - без изменения свойств радиуса границы - просто повернуть его на 180 градусов:

-webkit-transform: rotate(180deg); 

jsFiddle demo - выглядит так, как вы этого хотите.

---

В качестве альтернативы, вы можете просто повернуть вспять границы радиуса ..

jsFiddle demonstrating that..

border-radius: 120px 120px 0 0/90px 90px 0 0; 

Вы также должны удалить border-top: 0; и установить border-bottom:0.

Answer 2

Вы имеете в виду поворот радиусов наружу? Вы не можете этого сделать. Просто измените радиусы и используйте верхнюю границу вместо нижней границы.