CSS: Как поместить изображение в круг, где низ обрезается, а верх выскакивает?

Question

У меня есть родительский элемент div, представляющий собой круг, выполненный в CSS, и у ребенка есть изображение выстрела в голову. Я пытаюсь заставить голову выровняться с кругом внизу, но голова выходит за верхний край круга, подобно

Круг также имеет границу, похожую на пример.

Я изо всех сил пытаюсь заставить это соответствовать форме круга как этот. Я пытался использовать clip-path (Я пробовал это на маске круга, эллипса и svg), которая маскирует изображение, чтобы создать иллюзию, но я не уверен, что это правильный путь, и заставить его соответствовать краям круга довольно сложно. Любые идеи были бы хорошы.

Answer 1

Два SPAN элементы.

Родитель круглый с рамкой,
а внутренний имеет только закругленный нижний край. Чем играть с запасом и background свойства...

.circle-face{
  display: inline-block;
  border: 4px solid #00B9D1;
  border-radius: 50%;
  width: 140px; 
  height: 140px;
  margin-top: 30px;                /* 30px forehead space */
}
.circle-face > *{
  display: inline-block;
  width: 140px;
  height: 170px;                   /* by 30px higher */
  margin-top: -30px;               /* and offset by 30px */
  background: none no-repeat center bottom / 170px;
  border-radius: 0 0 70px 70px;    /* 70 + 70 = 140px width */
  /* box-shadow: 0 0 0 4px red;    /* UNCOMMENT TO SEE THE TRICK */
}

<span class="circle-face">
  <span style="background-image:url(https://stackru.com/images/d3f6dace04552118323108b7be7f77b003c41f83.png);"></span>
<span>