How to code this icon with background property in an element? - html

Question

How can I create this icon with only linear-gradients?
I have tried so far:
.a {
height: 45px;
width: 45px;
background: linear-gradient(to top, #444 0px, #444 15px, transparent 15px, transparent 45px) 0px 30px/15px 15px no-repeat,
linear-gradient(to top, #444 0px, #444 30px, transparent 30px, transparent 45px) 15px 15px/15px 30px no-repeat,
linear-gradient(to top, #444 0px, #444 45px) 30px 0px/45px 45px no-repeat;
}
<div class="a"></div>
But this don't showing properly in chrome. As you can see:
But when I zoomed it is shows properly. why?

Answer 1

Use overlapping gradient to avoid this issue and better consider percentage value to make it responsive:
.a {
height: 45px;
width: 45px;
background:
linear-gradient(#444,#444) right bottom / calc(1*100%/3) calc(3*100%/3),
linear-gradient(#444,#444) right bottom / calc(2*100%/3) calc(2*100%/3),
linear-gradient(#444,#444) right bottom / calc(3*100%/3) calc(1*100%/3);
background-repeat:no-repeat;
}
<div class="a"></div>
<div class="a" style="width:90px;height:90px;"></div>
Another syntax:
.a {
height: 45px;
width: 45px;
background-image:
linear-gradient(#444,#444),
linear-gradient(#444,#444),
linear-gradient(#444,#444);
background-size:
calc(1*100%/3) calc(3*100%/3),
calc(2*100%/3) calc(2*100%/3),
calc(3*100%/3) calc(1*100%/3);
background-position:right bottom;
background-repeat:no-repeat;
}
<div class="a"></div>
Another idea with background and some border:
.a {
--s:15px;
width: var(--s);
height: var(--s);
border-right: var(--s) solid #444;
border-bottom: var(--s) solid #444;
padding: var(--s) 0 0 var(--s);
background: #444 content-box;
}
<div class="a"></div>
<div class="a" style="--s:30px;"></div>