html - CSSを2つに分ける

Question

誰かが私を案内してもらえますか - CSS では、正方形のボックスを 2 つに分割/分割して、それらの間にギャップがあるようにするにはどうすればよいですか。

デモを見る

HTML:

<div id="bigBox">
    <div id="leftBox"><div>
    <div id="rightBox"></div>
 </div>

CSS:

#bigBox {
border-radius: 100px 0 100px 0;
height: 300px;
background: pink;
}

#leftBox {
    float:left;

}

#rightBox {
float:right;
}

編集: 他のスクリプト言語で実行できることはわかっていますが、CSS で実行したいので、それが可能であることはわかっています。ありがとう。

Answer 1

ピクセルを入れるのは役に立ちません。また、3 つの CSS ID は必要ありません。ユーザーがブラウザウィンドウの幅を広げても、私のコードはより流動的で、ページはUIを維持します。 http://jsfiddle.net/spKMM/8/このコードを参照してください

ここでは、html で 2 つの s のみを使用しました

<div id="bigLeftBox"></div>
<div id="bigRightBox"></div>

そして、2 つの CSS ブロックのみを使用しました。1 つは左部分用、次は右部分用です。

#bigLeftBox {
    border-radius: 100px 0 0 0;
    height: 100px;
    width:49%;
    background: pink;
    float:left;
}
#bigRightBox {
    border-radius: 0 0 100px 0;
    height: 100px;
    width:49%;
    background: green;
    float:right;
}

Answer 2

たぶん、あなたはこのようなことを意味しますか？

#bigBox div {
    height: 300px;
    background: pink;
    width:45%;
}

#leftBox {
    border-radius: 100px 0 0 0;
    float:left;
}

#rightBox {
    border-radius: 0 0 100px 0;
    float:right;
}

http://jsfiddle.net/Qxjxj/

Answer 3

CSS3では、_ _ _ _ _div

疑似オブジェクト:beforeと:after.

デモを見る