Как сделать полукруг в css?

Question

Всем привет, верстаю по макету и столкнулся с проблемой, нужно сделать полукруг в нем текст и чуть выше квадратик, полукруг я сделал а вот как все остальное сделать я не знаю..

Вот моя верстка круга

.aside_footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 59px;
    background: #2575aa;
    padding: 20px;
}

.footer_btn_one, .footer_btn_two {
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative;
    border-radius: 50%;
}
  
.footer_btn_one:after, .footer_btn_two:after {
    border-radius: 50%;
    display: block;
    content: "";
    background: #2575aa;
    position: absolute;
    z-index: 1;
    left: 1px;
    top: 1px;
    height: 23px;
    width: 23px;
}

.p1 {
    background-image: linear-gradient(-50deg, white 50%, transparent 50%), 
    linear-gradient(50deg, white 50%, #2575aa 50%);
}

<div class="aside_footer-info">
  <div class="footer_btn_one p1"></div>
  <div class="footer_btn_two p1"></div>
</div>

Answer 1

Вижу два варианта.

Использовать border без border-top

body {
  display: flex;
  background: #2575aa;
}

.cir {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  position: relative;
}

.cir::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: -4px;
}

.cir.--on::before {
  background: #00efc8;
}

.cir.--off::before {
  background: #b9bcc1;
}

.cir::after {
  font-size: 10px;
  color: #fff;
}

.cir.--on::after {
  content: 'ON';
}

.cir.--off::after {
  content: 'OFF';
}

.cir:nth-child(1) {
  margin-right: 10px;
}

<div class="cir --on"></div>
<div class="cir --off"></div>

Или же использовать box-shadow с цветом фона

body {
  display: flex;
  background: #2575aa;
}

.cir {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
  position: relative;
}

.cir::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: -4px;
  box-shadow: 0 0 0 3px #2575aa;
}

.cir.--on::before {
  background: #00efc8;
}

.cir.--off::before {
  background: #b9bcc1;
}

.cir::after {
  font-size: 10px;
  color: #fff;
}

.cir.--on::after {
  content: 'ON';
}

.cir.--off::after {
  content: 'OFF';
}

.cir:nth-child(1) {
  margin-right: 10px;
}

<div class="cir --on"></div>
<div class="cir --off"></div>

БЛОГ НА HUSL

Как сделать полукруг в css?

Ответы (1 шт):