CODEWITHSUNDEEP
htmlcss
doğukan
doğukan

Reputation: 27391

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

How can I create this icon with only linear-gradients?

enter image description here

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:

enter image description here

But when I zoomed it is shows properly. why?

Upvotes: 0

Views: 83

Answers (1)

Temani Afif
Temani Afif

Reputation: 272772

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>

Upvotes: 2

Related Questions