Search code examples
htmlcsscss-shapeslinear-gradients

How do I achieve L shape with css?

I am looking to achieve this style with css

enter image description here

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?

Solution

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