Div左上角和右上角相同颜色，线性渐变

Question

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

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

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

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

Answer 1

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一种方法是使用::before和::after伪元素：

＆＃13;

＆＃13;

#foo{
  position: relative;
  height: 200px;
  width: 200px;
  background-color: green;
}

#foo::before, #foo::after{
  content: '';
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

#foo::before{
  left: 0;
  border-width: 200px 70px 0 0;
  border-color: #007bff transparent transparent transparent;
}

#foo::after{
  right: 0;
  border-width: 0 70px 200px 0;
  border-color: transparent #007bff transparent transparent;
}

＆＃13;

<div id="foo"></div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle