Css 三色斜背景色

如何获得与此图像相似的背景：

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

---

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

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

该代码段使用了两个伪元素，这些伪元素的不同背景颜色以所需的角度倾斜，以产生三色效果

.bg{
位置：相对位置；
高度：200px；
宽度：400px；
填充：4px；
背景：橙色；
溢出：隐藏；
}
bg：之后，
bg：以前{
位置：绝对位置；
内容：''；
左：0px；
身高：100%；
宽度：100%；
变换原点：右上角；
}
bg：以前{
顶部：0px；
背景：红色；
变换：歪斜（-45度）；
}
bg：之后{
前-100%；
背景：黄色；
变换：歪斜（-15度）；
}
跨度{
位置：相对位置；
z指数：2；
}
/*只是为了演示*/
.bg:悬停{
高度：200px；
宽度：500px；
}

里面有些内容

SVG 这可以通过SVG实现。 我用了三个多边形。这可以设置为

背景图像

。 或者，也可以内联使用，以便在其上使用css属性

html，正文{
保证金：0；
填充：0；
}
.三倍{
宽度：250px；
高度：250px；
}
.三：悬停{
宽度：500px；
高度：100px；
}

---

是的，可以通过响应方式使用渐变来完成

也就是说，当纵横比改变时，你不想保持角度，而是保持相对位置

诀窍是在渐变方向上使用simbolic名称，然后处理背景图像的大小和位置

.test{
显示：内联块；
边框：实心1px黑色；
背景图像：线性渐变（左上角，番茄50%，透明50%），
线性渐变（右下角，浅绿色50%，透明50%）；
背景尺寸：60%100%，100%50%；
背景重复：无重复；
背景位置：右下、左上；
}
#测试1{
宽度：200px；
高度：100px；
}
#测试2{
宽度：100px；
高度：100px；
}
#测试3{
宽度：70px；
高度：100px；
}

---

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

---

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

@TimKrul:是的，这就是我想要说明的，因此就这样保留了它。当容器尺寸改变时，渐变需要颜色停止/角度改变。渐变角度可以进行自适应。（不确定我的英语是否足够好：-）看看我的答案，很好。浏览器对

到[side][side]

选项的支持是否良好？需要检查。@Harry是的，支持很好-和角度语法一样好。