1

スマイリーが悲しくなるように、反対側の境界半径が必要です。

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/

4

2 に答える 2

2

簡単な方法 - 境界線の半径のプロパティを変更する必要はありません - 180 度回転するだけです:

-webkit-transform: rotate(180deg);

jsFiddle デモ- 希望通りに見えます。

または、border-radius を逆にすることもできます。

それを示すjsFiddle..

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

border-top: 0;また、 を削除して設定する必要がありますborder-bottom:0。

于 2013-10-04T23:24:34.443 に答える
0

半径を外側に向けるということですか？そんなことはできません。半径を逆にして、下の境界線の代わりに上の境界線を使用するだけです。

于 2013-10-04T23:38:45.500 に答える