html - 純粋な CSS でこの丸め効果を作成することは可能ですか?

Question

下の画像の暗い部分のような丸みを純粋なCSSで作ることはできますか？

Answer 1

絶対。DIV を作成し、次のようなルールでクラスをアタッチするだけです。

.rounded_box {
    width: 90px;
    height: 60px;
    border-top-left-radius: 11px 30px;
    border-bottom-left-radius: 11px 30px;
    background-color: #333333;
}

<div class="rounded_box"></div>

探しているブラウザーのサポートによっては、border-radius ラインにベンダー固有のプレフィックスを追加する必要がある場合があります。そのような：

-webkit-border-top-left-radius: 11px 30px;
-webkit-border-bottom-left-radius: 11px 30px;
-moz-border-radius-topleft: 11px 30px;
-moz-border-radius-bottomleft: 11px 30px;

Answer 2

境界線の半径は間違いなく答えです。あなたのためにコードを生成するこの便利な小さなサイトをチェックしてください。

http://border-radius.com

また、IE 6、7、または8ではサポートされていないことに注意してください

Answer 3

はいhttp://www.css3.info/preview/rounded-border/は素晴らしいチュートリアルです。