<div class="graph_wrap">
  <div class="blind">기준: 0에서 15 좋음, 16에서 35 보통, 36에서 75 나쁨, 76이상 매우나쁨</div>
  <div class="data_wrap">
    <div class="data">
      <div class="bar level1" style="height: 5%">좋음 4</div>
    </div>
    <div class="data">
      <div class="bar level1" style="height: 25%">좋음 15</div>
    </div>
    <div class="data">
      <div class="bar level2" style="height: 50%">보통 35</div>
    </div>
    <div class="data">
      <div class="bar level3" style="height: 75%">나쁨 75</div>
    </div>
    <div class="data">
      <div class="bar level4" style="height: 100%">매우나쁨 100</div>
    </div>
    <div class="data">
      <div class="bar level3" style="height: 80%">나쁨 75</div>
    </div>
    <div class="data">
      <div class="bar level2" style="height: 30%">보통 20</div>
    </div>
  </div>
</div>
.blind {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
}

.graph_wrap {
    overflow: hidden;
    position: relative;
  width: 375px;
  margin: 0 auto;
  padding: 50px 18px;
  background-color: #f8fafb
}

.data_wrap {
    height: 100px;
  background-image: linear-gradient(transparent 24px, rgba(229,233,235,0.4) 24px), linear-gradient(90deg, #ecf0f2 10px, transparent 10px);
    background-size: 100% 25px, 14px 100%;
    font-size: 0
}

.data {
    position: relative;
    float: left;
    z-index: 10;
    width: 10px;
    height: 100%;
    margin-left: 4px
}

.data:first-child {
    margin-left: 0
}

.bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 0;
    color: transparent
}

.level1 {
    background-color: #32a1ff
}

.level2 {
    background-color: #00c73c
}

.level3 {
    background-color: #fda60e
}

.level4 {
    background-color: #e64747
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.