Anas Alathamneh Anas Alathamneh - 4 years ago 119
CSS Question

Drawing half a circle in CSS

How can I draw half a circle like this image in CSS.
enter image description here



and by using only CSS definitions. No SVG, WebGL, DirectX allowed.

Answer Source

Something like this would probably work:

.box {
  width: 604px;
  border-width: 0 1px 1px;
  border-color: #ddd;
  border-style: solid;
  overflow: hidden;
}
.circles {
  border-top: 1px solid #ddd;
  display: flex;
  list-style-type: none;
  margin: 0;
}

.circles li {
  background-color: white;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border-width: 0 1px 1px;
  border-color: #ddd;
  border-style: solid;
  margin: 0 17px;
  position: relative;
  transform: translateY(-50%);
}
<div class="box">
  <ul class="circles">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  Circles for the win
  
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download