Css 左上角和右上角的Div颜色相同，具有线性渐变

我想通过CSS拥有以下UI。我试着使用下面的方法，但它没有产生我所期望的输出

background: linear-gradient(to bottom right, black 20%, white 20%); 

---

（不需要黑色边框。它们仅用于边框）

---

有人能给出解决此问题的建议或解决方案吗？

一种方法是使用

：before

和

：：after

伪元素：

#foo{
位置：相对位置；
高度：200px；
宽度：200px；
背景颜色：绿色；
}
#foo：：之前，#foo：：之后{
内容：''；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
边框样式：实心；
}
#福：以前{
左：0；
边框宽度：200px 70px 0；
边框颜色：#007bff透明；
}
#傅：之后{
右：0；
边框宽度：0 70px 200px 0；
边框颜色：透明#007bff透明透明；
}

---

这也可以通过使用两幅

线性渐变

背景图像来实现。我们所要做的就是创建具有所需大小的渐变，并将它们放置在元素的左上角和右上角

线性渐变产生的输出是响应性的，一个优点是它不需要任何额外的伪元素（因此它们可以用于其他目的）。主要缺点是浏览器支持渐变。它们适用于所有现代浏览器，但不适用于IE9-。另一个问题是，当容器的尺寸变大时，梯度会产生锯齿状边缘，但只要不需要边界，这就不是什么大问题

div{
位置：相对位置；
高度：200px；
宽度：175px；
背景色：rgb（3417776）；
背景图像：线性渐变（左上角，透明钙（50%-1px），rgb（01162232）钙（50%+1px）），线性渐变（右上角，透明钙（50%-1px），rgb（01162232）钙（50%+1px））；
背景大小：30%85%；
背景位置：左上、右上；
背景重复：无重复；
过渡：所有2；/*仅用于演示*/
}
div:悬停{
高度：400px；
宽度：350px；
}

---

@vucko，我试过背景：线性渐变（右下角，黑色20%，白色20%）；我能举一些与此相关的例子吗？我是这方面的新手。黑色边框是否也是必需的（或者）它们是否仅出现在图像中用于标记边界？黑色边框不是必需的。它们仅用于边界。此代码在所有浏览器/版本中都支持吗？如果有任何问题，请告诉我。@getty:它不仅适用于IE9、IE8（因为它们不支持渐变）。Firefox应该可以在所有其他浏览器中工作，尽管是Chrome的一些旧版本，但它需要

-webkit-

或

-moz-

前缀。您可以找到浏览器支持图表。更喜欢您的解决方案：）