css - 三种颜色 Angular 背景颜色

Question

我怎样才能获得与这张图片相似的背景:

只有 3 种颜色，从顶 Angular 像阳光一样倾斜。

也许坚持使用简单的 PNG 或 SVG 背景图像会是更好的方法。

Answer 1

效果可以通过 CSS 使用伪元素和转换来实现，下面是一个示例片段。但我不认为使用 CSS 是正确的选择。最好使用 PNG 图片。

该代码段使用了几个具有不同背景颜色的伪元素，这些伪元素以所需的 Angular 倾斜以产生三色效果。

.bg {
  position: relative;
  height: 200px;
  width: 400px;
  padding: 4px;
  background: orange;
  overflow: hidden;
}
.bg:after,
.bg:before {
  position: absolute;
  content: '';
  left: 0px;
  height: 100%;
  width: 100%;
  transform-origin: right top;
}
.bg:before {
  top: 0px;
  background: red;
  transform: skewY(-45deg);
}
.bg:after {
  top: -100%;
  background: yellow;
  transform: skewY(-15deg);
}
span {
  position: relative;
  z-index: 2;
}

/* Just for demo */
.bg:hover {
  height: 200px;
  width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
  <span>Some content inside</span>
</div>

也可以使用成 Angular 线性渐变，但我认为它们不适用于动态大小的容器元素，因为 Angular 需要随着尺寸的变化而修改以保持外观相同。

下面是一个使用linear-gradient 的片段。将鼠标悬停在形状上以查看宽度和/或高度的变化如何影响它。

.bg {
  position: relative;
  height: 200px;
  width: 400px;
  background: linear-gradient(310deg, red 30%, transparent 30%), linear-gradient(340deg, transparent 58%, yellow 58%), orange;
  overflow: hidden;
}
.bg:hover {
  height: 200px;
  width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="bg">
  <span>Some content inside</span>
</div>