Question

I have this gradient:

if ($Arg =~ /^-std=/) {
  push @CompileOpts,$Arg;
  next;
}

我想知道a）我如何翻转它以使它从顶部出来并且b）如何在没有第三部分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); }的情况下重写，因为我只想要一种颜色而且这样看似错误。< / p>

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

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

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]语法，因为它有助于实现响应式输出。（您可以参考this answer of mine获取有关此更改有何帮助的详细说明。）

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

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三角形渐变？

2 个答案: