CSS - Bar Graph Icon
Code example for drawing a simple bar graph icon using HTML and CSS.
The HTML code sets the class name "bar-graph-icon" for the <div> tag which will make up the bar graph icon element.
It sets <div> tags for the frame and 3 bar graph bars.
<div class="bar-graph-icon">
<div></div><div></div><div></div><div></div>
</div>
The CSS custom properties:
"--w" sets the base size.
"--color" sets the base color.
/* Bar Graph Icon */
.bar-graph-icon {
--w: 300px; /* Base Size */
--color: #4169e1; /* Base Color */
position: relative;
width: var(--w);
height: var(--w);
}
/* Frame */
.bar-graph-icon div:nth-child(1) {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border: solid calc(var(--w) * 0.08) var(--color);
border-top: 0;
border-right: 0;
box-sizing: border-box;
}
/* Bar A */
.bar-graph-icon div:nth-child(2) {
position: absolute;
bottom: 20%;
left: 20%;
width: 20%;
height: 60%;
background: var(--color);
transform-origin: center bottom;
}
/* Bar B */
.bar-graph-icon div:nth-child(3) {
position: absolute;
bottom: 20%;
left: 45%;
width: 20%;
height: 40%;
background: var(--color);
transform-origin: center top;
}
/* Bar C */
.bar-graph-icon div:nth-child(4) {
position: absolute;
bottom: 20%;
left: 70%;
width: 20%;
height: 70%;
background: var(--color);
}