<ul class="chart-skills">
  <li>
    <span>CSS</span>
  </li>
  <li>
    <span>HTML</span>
  </li>
  <li>
    <span>PHP</span>
  </li>
  <li>
    <span>Python</span>
  </li>
</ul>

body {
  font: normal 16px/1.5 'Roboto', sans-serif;
  padding: 130px 0 0 0;
  background: #f1f1f1;
}


/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-skills {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}

.chart-skills *,
.chart-skills::before {
  box-sizing: border-box;
}


/* CHART-SKILLS STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-skills {
  position: relative;
  width: 350px;
  height: 175px;
}

.chart-skills::before,
.chart-skills::after {
  position: absolute;
}

.chart-skills::before {
  content: '';
  width: inherit;
  height: inherit;
  border: 45px solid rgba(211, 211, 211, .3);
  border-bottom: none;
  border-top-left-radius: 175px;
  border-top-right-radius: 175px;
}

.chart-skills::after {
  content: 'Top Skills';
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: bold;
  color: cadetblue;
}