如何使用元素的background属性对该图标进行编码？

Question

如何仅使用线性渐变创建此图标？

到目前为止，我已经尝试过：

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

但是在chrome中无法正确显示。如您所见：

但是当我缩放时，它显示正确。为什么？

Answer 1

使用重叠渐变来避免此问题，并更好地考虑百分比值以使其具有响应性：

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

另一种语法：

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

另一个带有背景和边框的想法：

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