上面方法不行换一个方法

另外一种实现左右两边的div都是白色中有一条居中的可以自定义颜色的线的方法是使用CSS的linear-gradient属性。

代码如下：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  display: flex;
  justify-content: space-between;
}

.left,
.right {
  height: 100px;
  width: 50%;
  background-color: white;
  background-image: linear-gradient(to right, white, white), linear-gradient(to right, red, red); /* 可以自定义颜色 */
  background-repeat: no-repeat;
  background-position: center;
}

.left {
  background-image: linear-gradient(to right, red, red), linear-gradient(to right, white, white); /* 可以自定义颜色 */
}

在上面的代码中，我们仍然使用了flex布局来实现左右两边的div平分容器的宽度。然后，我们使用CSS的linear-gradient属性来创建两个渐变背景，第一个渐变背景用于创建白色的背景，第二个渐变背景用于创建颜色线条。在左边的div中，我们将渐变背景的顺序反转，使其颜色线条在左边。最后，可以自定义左右两边线的颜色。