反向邊界半徑

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

你的意思是把半徑向外？你不能那樣做。只需倒轉半徑並使用頂部邊框而不是底部邊框。