html - 如何使用 css 实现 L 形？

Question

我希望用 css 实现这种风格

到目前为止我已经做了:

.file {
  width: 279px;
  height: 326px;
  background: linear-gradient(-135deg, transparent 66px, #A1A1A4 40px);
  position: relative;
}

.file::before,
.file::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-color: transparent;
  border-style: solid;
}

.file::before {
  border-top: 90px solid transparent;
  border-left: 90px solid transparent;
}

.file::after {
  margin-top: -2.6px;
  width: 0;
  height: 0;
  border-bottom: 93px solid #281EBE;
  border-right: 94px solid transparent;
}

<div class="file">
</div>

And it looks like this

三 Angular 形的 Angular 不正好是 90 度。我如何在蓝色三 Angular 形和灰色矩形之间设置透明间距？

Answer 1

我会像这样只使用线性渐变:

body {
 background:pink;
}
.file {
  width:300px;
  height:600px;
  background:
  linear-gradient(to bottom left,transparent 50%,blue 50%) 100% 0/47px 47px no-repeat,
  linear-gradient(grey,grey)0 0/calc(100% - 50px) 100% no-repeat,
  linear-gradient(grey,grey)0 50px/100% 100% no-repeat;
}

<div class="file">
</div>

如果你想要灰色部分周围的边框，你可以像这样添加更多渐变:

body {
 background:pink;
}
.file {
  width:300px;
  height:600px;
  background:
  linear-gradient(to bottom left,transparent 50%,blue 50%) 100% 0/47px 47px no-repeat,
  linear-gradient(grey,grey)0 2px/calc(100% - 52px) 100% no-repeat,
  linear-gradient(grey,grey)0 52px/calc(100% - 2px) 100% no-repeat,
  linear-gradient(#000,#000)0 0/calc(100% - 50px) 100% no-repeat,
  linear-gradient(#000,#000)0 50px/100% 100% no-repeat;
  border-left:2px solid #000;
  border-bottom:2px solid #000;
}

<div class="file">
</div>

为了轻松处理形状，您可以使用 CSS 变量:

body {
 background:pink;
}
.file {
  --d:50px;
  width:150px;
  height:200px;
  display:inline-block;
  background:
  linear-gradient(to bottom left,transparent 50%,blue 50%) 100% 0/calc(var(--d) - 3px) calc(var(--d) - 3px) no-repeat,
  linear-gradient(grey,grey)0 2px/calc(100% - var(--d) - 2px) 100% no-repeat,
  linear-gradient(grey,grey)0 calc(var(--d) + 2px)/calc(100% - 2px) 100% no-repeat,
  linear-gradient(#000,#000)0 0/calc(100% - var(--d)) 100% no-repeat,
  linear-gradient(#000,#000)0 var(--d)/100% 100% no-repeat;
  border-left:2px solid #000;
  border-bottom:2px solid #000;
}

<div class="file">
</div>
<div class="file" style="--d:20px">
</div>
<div class="file" style="--d:110px">
</div>