Как реализовать полукруг круге?

Question

[frontAng]

https://jsbin.com/dijopekabo/edit?html,css,js,output

Answer 1

[Сергей delphinpro]

Нет здесь никаких полукругов.
Два одинаковых круга наложенные друг на друга. Один из них немного смещён.

<div class="circle"></div>

.circle, .circle::before {
  width: 300px;
  height: 300px;
  border-radius: 100%;
}
.circle {
  background: red;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  left: 30px;
  top: -30px;
  backgroud: blue;
}

Answer 2

[Ankhena]

Просто тень
box-shadow: -10px 10px 0 0 violet;

Comments

[frontAng]

Ankhena, интересное решение. Спасибо

[frontAng]

Ankhena, так и сделано. Спасибо

Answer 3

[Максим]

Два элемента
Один настоящий втрой (по низом) псевдо

Comments

[frontAng]

Максим, то что псевдо догадываюсь. А как именно? можно пример , пожалуйста