使用CSS填充背景 - 两种不同的颜色和一种重叠另一种颜色

Question

我可以仅使用CSS创建这样的填充(没有图像作为背景)以及如何？

我的意思是 - 我有两个填充两种颜色的div,但我只能用常规颜色填充它们,但我需要一个"重叠"部分.

也许我需要两个div并填充它们background-color和第三个div具有"两个重叠"的背景颜色.但是,我不知道如何创建这个重叠的部分.

Answer 1

当然,你可以使用多个元素并重叠它们,但最简单的方法是使用角度linear-gradient为背景,如下面的代码片段.将第一种颜色的颜色停止点作为第二种颜色的起始点使得渐变输出看起来像2种纯色,而不是从一种颜色逐渐变化到另一种颜色.(注意:我在第二种颜色的颜色开始处添加了0.5%的增量,因为倾斜的渐变通常会产生锯齿状边缘,这样可以避免它.)

.two-colors {
  height: 75px;
  width: 400px;
  background-image: linear-gradient(135deg, blue 60%, black 60.5%);
}

<div class='two-colors'></div>