反转CSS三角形渐变？

Question

div {
  height: 100px;
  width: 100px;

  background: linear-gradient(-60deg, transparent 63%, white 63%),
              linear-gradient(60deg, transparent 63%, white 63%),
              linear-gradient(to top, blue, blue);
}

我想知道 a) 我如何翻转它以便它从顶部出现 b) 如何在没有第三部分的情况下重写 (to top, blue, blue) 因为我只想要一种颜色而且这样看起来不对.

Answer 1

第一部分可以试试this

div {
  height: 100px;
  width: 100px;

  background: linear-gradient(120deg, transparent 63%, white 63%),
              linear-gradient(-120deg, transparent 63%, white 63%),
              blue;
}

第二部分，试试this

div {
    height: 0;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid blue;
}

希望对您有所帮助..

Answer 2

这可以通过为图像设置适当的 background-size 和 background-position 来实现，只需两张 linear-gradient 图像（如下面的代码片段所示）。

div {
  height: 100px;
  width: 100px;
  background: linear-gradient(to top right, transparent 49.5%, blue 50.5%), 
              linear-gradient(to top left, transparent 49.5%, blue 50.5%);
              /* the difference in color stops is to produce smoother edges */
  background-size: 50% 95%; /* X size should be 50%, Y size can be as you wish */
  background-position: left top, right top; /* don't change */
  background-repeat: no-repeat; /* don't change */
}

/* just for demo */
div {
  border: 1px solid;
  display: inline-block;
  vertical-align: bottom;
}
div:nth-child(2), div:nth-child(4) { width: 150px; }
div:nth-child(2), div:nth-child(3) { height: 150px; }

<div></div>
<div></div>
<div></div>
<div></div>

我已将渐变更改为 to [side] [side] 语法，因为它有助于实现响应式输出。（您可以参考以详细了解为什么该更改会有所帮助。）

在下面的代码片段中，我为渐变提供了两种不同的颜色，以便您可以直观地看到发生了什么。

div {
  height: 100px;
  width: 100px;
  background: linear-gradient(to top right, transparent 49.5%, blue 50.5%), linear-gradient(to top left, transparent 49.5%, green 50.5%);
  background-size: 50% 95%;
  background-position: left top, right top;
  background-repeat: no-repeat;
}

<div></div>

反转CSS三角形渐变？

Reverse CSS triangle gradient?

css

linear-gradients