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 - 看看你想要它的确切方式。

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

jsFiddle demonstrating that..

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

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

Answer 2

你的意思是将半径向外转？你不能这样做。只需反转半径并使用顶部边框而不是底部边框。

反向边界半径

2 个答案: