Html CSS一分为二

有人能指导我吗？在CSS中，我怎样才能把一个方形的盒子一分为二，这样中间就有一个空隙

看

HTML:

编辑：我知道它可以在其他脚本语言中完成，但我希望它在CSS中，我知道这是可能的。谢谢。

框1内容 框2上下文

这将给您带来您想要的效果。

在CSS3中，您可以实现类似于分割div的效果

通过使用伪对象：before和：after

---

看

也许你的意思是这样的

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

嗯

这有点草率，但从我从你的问题中得到的信息来看，这就是你想要的

HTML

---

放置像素是没有帮助的。而且您不需要三个CSS ID。我的代码更流畅，虽然用户增加了浏览器窗口的宽度，但页面将保持UI。 请参阅此代码

在这里，我在html中只使用了两个s

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

---

你不能像你所说的那样“拆分”一个div或box。您将需要创建两个div。但首先，我建议你花些时间研究HTML和CSS。@ChrisTill哦，我想我可以拆分它们吗？我已经创建了两个div，如图所示。谢谢，但这并没有将长方体一分为二-我看不到它们之间有小间隙？如果您调整窗口大小，或者在：before和：after上设置较小的宽度，您实际上应该能够看到相当大的间隙=但是作为上面的帮助。。。它并不是真的拆分任何东西，CSS只是添加了两个附加的虚拟div，它们在hrml中不存在，但是您可以与父div分开设置样式。但是这不再有什么意义了。。。当您编辑您的问题并在其内添加左、右div时^ ^谢谢您的想法！因此，您没有将边界半径放在大方框中，而是将其放在两个div中！：谢谢，我确实试过了，但我的似乎不起作用。。。。

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

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

#bigBox {
  width:800px;
  height: 300px;
}
#leftBox {
  float:left;
  height:300px;
  width: 390px;
  background: pink;
  margin:0;
  border-radius: 100px 0 0 0;
}
#rightBox {
  float:right;
  height:300px;
  width: 390px;
  background: pink;
  border-radius:0 0 100px 0;
}

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

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