三种颜色有角度的背景颜色

Question

我怎样才能获得与此图像类似的背景：

只有3种颜色，从顶角向外倾斜，就像阳光一样。

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

Answer 1

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

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

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

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

以下是使用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>

Answer 2

SVG

这可以通过SVG完成。 我使用了三个多边形形状。这可以设置为background-image。 或者可以使用内联，因此您可以在其上使用css属性。

＆＃13;

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}
.triple {
  width: 250px;
  height: 250px;
}
.triple:hover {
  width: 500px;
  height: 100px;
}

＆＃13;

<svg class="triple" viewBox="0 0 100 100" preserveAspectRatio="none">
  <polygon fill="#dd2" points="0,0 100,0 0,60" />
  <polygon fill="#bb2" points="0,60 100,0 30,100 0,100 " />
  <polygon fill="#992" points="30,100 100,0 100,100" />
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 3

是的，它可以通过渐变来完成，以一种快速响应的方式。

假设当宽高比改变时，你不想保持角度，而是相对位置

诀窍是在渐变方向上使用符号名称，然后使用背景图像的大小和位置进行播放

.test {
    display: inline-block;
    border: solid 1px black;
    background-image: linear-gradient(to top left, tomato 50%, transparent 50%),
    linear-gradient(to bottom right, lightgreen 50%, transparent 50%);
    background-size: 60% 100%, 100% 50%;
    background-repeat: no-repeat;
    background-position: bottom right, top left;
}

#test1 {
    width: 200px;
    height: 100px;
}

#test2 {
    width: 100px;
    height: 100px;
}

#test3 {
    width: 70px;
    height: 100px;
}

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>

Answer 4

使用4色GIF图像。这将为您提供跨浏览器/平台兼容性以及向后兼容性，并且此类图像的大小将很小。如果颜色是微妙的，如图所示＆＃34; jaggies＆＃34;将被伪装一些（或提供更大的尺寸）。

一个好的选择是使用SVG，它在现代最新的浏览器中得到很好的支持。