Question

我试图获得一个充满渐变的三角形。三角形应位于页面的左上角，并拉伸50％的水平视口和120％的垂直视口。

我需要三角形来运行渐变 我设法做了前三件事，但我无法使梯度起作用我尝试过以不同的方式使用溢出和transform: rotate();来定位伪元素以实现它，但我无法让它工作。

这是我目前所拥有的JSfiddle：

＆＃13;

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0 120vh 50vw;
  border-color: transparent transparent transparent green;
}

＆＃13;

<div class="triangle"></div>

＆＃13;

Answer 1

要保持所需的比例，您可以使用inline SVG preserveAspectRatio="none"属性（see MDN）。这样，宽度和高度就固定在您使用的视口单元上您可以使用polygon element制作三角形，linearGradient element 使用渐变填充三角形：

＆＃13;

svg {
  width: 50vw;
  height: 120vh;
}

＆＃13;

<svg viewBox="0 0 10 10" preserveAspectRatio="none">
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="darkorange" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon fill="url(#gradient)" points="0 0 10 0 0 10" />
</svg>

＆＃13;

Answer 2

您可以尝试使用旋转和固定这样的位置：

＆＃13;

.triangle {
  position: fixed;
  height: 120vh;
  width: 120vh;
  background: linear-gradient(45deg, red, blue);
  transform: rotate(-45deg);
  left: -60vh;
  top: -60vh;
}

＆＃13;

<div class="triangle"></div>

＆＃13;

您可以根据需要调整值。

带有渐变的CSS三角形

2 个答案: