How do I achieve L shape with css? - html

Question

I am looking to achieve this style with css
So far I have done:
.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
The angle of triangle is not exactly 90deg. And how do I have that transparent spacing between the blue triangle and grey rectangle?

Answer 1

I would go with only linear gradient like this:
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>
And if you want the border around the grey part you can add more gradient like this:
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>
And to easily handle the shape you can use CSS variables:
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>