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

Question

如何使用线性渐变绘制下面相同的三角形？我尝试了不同的解决方案，但如果将其放入容器中，其中 none 会起作用，就像我的示例

.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

为达到预期效果，请使用以下更新右边框的选项

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

Answer 2

linear-gradient 解决方案可以通过对您的 card:before class

进行小的调整来轻松实现

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

这将导致渐变 从右下角到左上角 带有灰色色标。

我想您可能需要稍微调整一下渐变，以防根据您的 post 涉及图像！ :)

.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;
}

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

Answer 3

通过为渐变使用色标和角度，您可以非常精确地控制where/how它应该被绘制

.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>

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

Draw top left triangle with linear-gradient and put it in a container

css

linear-gradients