html 一条水平线两个不同的颜色怎么实现？

Question

向这样的水平线怎么实现？

Answer 1

用一个 div ，分别设置左边框右边框。

  .line{
        border-left: 500px solid red;
        border-right: 500px solid green;
        height: 2px;
        width: 0;
   }

Answer 2

可以用伪类来实现，比如：

div {
        width: 100px;
        height: 5px;
        background: red;
}
div::after {
        content: '';
        width: 100px;
        height: 5px;
        background: pink;
}

<div></div>

Answer 3

可以用渐变，

<div style="width: 400px; height: 2px;"></div>
div {
  background: linear-gradient(90deg, red 50%,  blue 50%);
}

Answer 4

两个div叠加

Answer 5

linear-gradient