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

我希望用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
三角形的角度不完全是90度。我如何在蓝色三角形和灰色矩形之间有透明的间距？

最佳答案

我只使用这样的线性梯度：

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>

关于html - 如何使用CSS实现L形？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49461903/