Question

这是一个线性渐变，它在div左下角的右上方创建了三角形，但是，我无法解决如何仅在右上方制作三角形，即删除左下角。有人可以帮忙吗？

这是codepen

"assessments"."organization_id" =

Answer 1

将一个从0％移除到5％，将一个从5％移到10％

在这里，您必须想象一个页面，其中有一系列线条将其分开，旋转45度。

所以从页面的0％到5％（左下角），它是橙色的 - rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%

从5％到10％ - 灰色：rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%,

从10％到90％ - 浅灰色：rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%,

从90％到95％ - 灰色：rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%,

最后从95％到100％ - 橙色：rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%

.test {
  min-height: 17rem;
  background: linear-gradient(45deg, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 90%, rgba(231, 229, 219, 1) 90%, rgba(231, 229, 219, 1) 95%, rgba(237, 165, 9, 1) 95%, rgba(237, 165, 9, 1) 100%);

<div class="test">

</div>

或者正如GCyrillus指出的那样 - 如果您希望自己的角落在css的开头而不是结束，那么您可以执行以下操作：

.test {
  min-height: 17rem;
  background: linear-gradient(-135deg, rgba(237, 165, 9, 1) 0%, rgba(237, 165, 9, 1) 5%, rgba(231, 229, 219, 1) 5%, rgba(231, 229, 219, 1) 10%, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 100%);
}

<div class="test">

</div>

CSS3线性渐变

1 个答案: