<div class="chart">
<div class="bar-45"></div>
<div class="bar-100"></div>
<div class="bar-63"></div>
<div class="bar-11"></div>
<div class="bar-46"></div>
<div class="bar-88"></div>
<div class="bar-35"></div>
<div class="bar-11"></div>
<div class="bar-78"></div>
<div class="bar-91"></div>
<div class="bar-55"></div>
<div class="bar-16"></div>
</div>
$gap: 5px;
$totalRows: 101;
body {
margin: 0px;
}
.chart {
width: 70%;
height: 100vh;
margin: 0 auto;
display: flex;
padding: $gap;
box-sizing: border-box;
align-items: flex-end;
}
[class*="bar"] {
background-color: #ff4136;
flex-grow: 1;
margin-right: $gap;
border-radius: 5px;
}
[class*="bar"]:last-of-type {
margin-right: 0px;
}
[class*="bar"]:nth-child(even) {
background-color: #0074d9;
}
@for $i from 1 through $totalRows {
.bar-#{$i} {
height: $i * 1%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.