用线性渐变绘制左上角三角形并将其放入容器中

Question

如何使用线性渐变绘制下面相同的三角形？ 我尝试了不同的解决方案，但是如果你把它放在容器中，它们都没有用，就像在我的例子中一样

.card {
  background-color: black;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
}
.card::before {
    content: '';
    position: absolute;
    border-top: 12rem solid #fff;
    border-right: 6.813rem solid transparent;
    height: 0;
    left: 0;
    opacity: .3;
    width: 0;
  }

.card-title {
  background-color: grey;
  height: 3.688rem;
}

<div class="card">
  <div class="card-title"></div>
</div>

预期结果：

Answer 1

通过对linear-gradient类进行小幅调整，可以轻松实现card:before解决方案

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(to top left, transparent 50%, #ccc);
  height: 100%;
  left: 0;
  top:0;
  width: 100%;
}

这将产生一个渐变，从右下角到左上角，带有灰色停止。

我想你可能需要稍微调整一下渐变，以防你的帖子涉及图片！ ：）

＆＃13;

＆＃13;

.card {
  background-color: black;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(to top left, transparent 50%, #ccc);
  height: 100%;
  left: 0;
  width: 100%;
}

.card-title {
  background-color: grey;
  height: 3.688rem;
}

＆＃13;

<div class="card">
  <div class="card-title"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过对渐变和角度使用颜色停止，您可以非常准确地控制应该在何处/如何绘制

.card {
  background-color: #444;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden
}

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(-60deg, rgba(0,0,0,0.15) 60%, transparent 40%);
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.card-title {
  background-color: #F1D773;
  height: 3.688rem;
}

<div class="card">
  <div class="card-title"></div>
</div>

您可以同时使用伪和黄色和灰色背景上的不同渐变

.card {
  background-color: #444;
  height: 12.44rem;
  width: 10.44rem;
  border-radius: 10px;
  position: relative;
  overflow: hidden
}

.card::before {
  content: '';
  position: absolute;
  background: linear-gradient(-60deg, #E9BF21 34%, transparent 34%);
  height: 3.688rem;
  left: 0;
  top: 0;
  width: 100%;
}

.card::after {
  content: '';
  position: absolute;
  background: linear-gradient(-60deg, black 60%, transparent 40%);
  bottom: 0;
  left: 0;
  top: 3.688rem;
  width: 100%;
}

.card-title {
  background-color: #F1D773;
  height: 3.688rem;
}

<div class="card">
  <div class="card-title"></div>
</div>

Answer 3

要达到预期效果，请使用以下选项更新border-right

border-right：10.553rem solid transparent;

.card::before {
    content: '';
    position: absolute;
    border-top: 12rem solid #fff;
    border-right: 10.553rem solid transparent;
    height: 0;
    left: 0;
    opacity: .3;
    width: 0;
  }


https://codepen.io/nagasai/pen/RVLKrJ