css - 反向边界半径

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);
    }

这是 fiddle 链接:

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

Answer 1

一个简单的方法 - 无需修改边框半径属性 - 只需将其旋转 180 度:

-webkit-transform: rotate(180deg);

jsFiddle demo - 看起来完全符合您的要求。

---

或者，您可以反转 border-radius..

jsFiddle demonstrating that..

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

您还需要删除 border-top: 0;，并设置 border-bottom:0。