三种颜色有角度的背景颜色 [英] Three colors angled background color

问题描述

如何实现与此图片类似的背景：

How could I achieve a background that looked similar to this image:

只有3种颜色，从顶部角落看起来像阳光。

Only 3 colors, angled from the top corner out like a sunray.

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

Maybe sticking with a simple PNG or SVG background image would be a better approach.

推荐答案

效果可以使用伪元素和变换实现CSS，下面是一个示例代码片段。但我不认为使用CSS是正确的选择这一点。

The effect can be achieved with CSS using pseudo-elements and transforms and the below is a sample snippet. But I don't think using CSS is the correct option for this. It would be better to use a PNG image.

该片段使用了一些伪元素，这些伪元素在所需的角度倾斜不同的背景颜色，以产生三色效果。

The snippet uses a couple of pseudo-elements with different background colors skewed at required angles to produce the three-color effect.

.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>

倾斜的线性梯度也可以使用，但我不认为它们对动态大小的容器元素有好处，因为角度需要修改，因为尺寸改变以保持外观一致。

Angled linear-gradients also could be used but I don't think they are good for dynamic sized container elements as the angles need to be modified as the dimensions change to keep the appearance the same.

下面是使用 linear-gradient 的代码段。将鼠标悬停在形状上即可查看宽度和/或高度变化对其的影响。

Below is a snippet using linear-gradient. Hover on the shape to see how a change of width and/or height affects it.

.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>

这篇关于三种颜色有角度的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！