html - 如何使用CSS制作双色条纹？

Question

我想制作下面的条纹。这样做的正确方法是什么？

Answer 1

看起来您正在寻找渐变。这通常在您想要使用多种颜色设置样式时使用。

渐变默认垂直显示。要水平显示它，我们需要使用可选的 direction 参数。在本例中，它是向右。

我看不出图片中使用的颜色是什么，但它们看起来像深绿色和青柠色。

#colored {
  background: linear-gradient(to right, DarkGreen 70%, lime);
  width: 100%;
  height: 50px;
}

<div id="colored"></div>