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

Question

我想通过 CSS 获得以下 UI。我尝试使用以下方法，但它没有产生我预期的输出。

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

(不需要黑色边框。它们仅用于边界)

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

Answer 1

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

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

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

JSFiddle

Answer 2

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

线性渐变产生的输出是响应式的，一个优点是它不需要任何额外的伪元素（因此它们可以用于其他目的）。主要缺点是浏览器对渐变的支持。它们适用于所有现代浏览器，但不适用于 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>

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

Div with top left and right corner same color with linear gradient

css

linear-gradients

css-shapes