css - 左上角和右上角同色且线性渐变的div

Question

我希望通过 CSS 获得以下 UI。我尝试使用以下内容，但它没有产生我期望的输出。

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

(黑色边框不是必需的。它们只是边界)

有人可以提出任何建议或解决方案来解决这个问题吗？

Answer 1

这也可以使用几个线性渐变背景图像来实现。我们所要做的就是创建具有所需大小的渐变并将它们放置在元素的左上角和右上角。

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

div {
  position: relative;
  height: 200px;
  width: 175px;
  background-color: rgb(34, 177, 76);
  background-image: linear-gradient(to top left, transparent calc(50% - 1px), rgb(0, 162, 232) calc(50% + 1px)), linear-gradient(to top right, transparent calc(50% - 1px), rgb(0, 162, 232) calc(50% + 1px));
  background-size: 30% 85%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  transition: all 2s;  /* just for demo */
}

div:hover {
  height: 400px;
  width: 350px;
}

<div></div>

---

如果需要，我们还可以通过更多地使用渐变来添加边框。

div {
  position: relative;
  height: 200px;
  width: 175px;
  background-color: rgb(34, 177, 76);
  background-image: linear-gradient(to top left, transparent calc(50% - 1px), black 50%, black calc(50% + 1px), rgb(0, 162, 232) calc(50% + 2px)), linear-gradient(to top right, transparent calc(50% - 1px), black 50%, black calc(50% + 1px), rgb(0, 162, 232) calc(50% + 2px));
  background-size: 30% 85%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  transition: all 2s;
  /* just for demo */
  border: 2px solid black;
}
div:hover {
  height: 400px;
  width: 350px;
}

<div></div>