你可以使用CSS的伪类:before和:after来实现这个效果。:before用来创建一个元素在父元素之前的内容，:after用来创建一个元素在父元素之后的内容。

以下是一个简单的示例：

```html

```

```css .container { width: 200px; height: 200px; background-color: #f00; }

.half-white { background-color: #fff; }

.half-black { background-color: #000; } ```

在这个例子中，我们创建了一个200px*200px的div，其中div.half-white和div.half-black分别表示两个白色的div元素。:before元素会创建一个与div.half-white相同的白色div元素在div.container的前面，:after元素会创建一个与div.half-black相同的黑色div元素在div.container的后面。