Отправить SVG за границу div

Question

Я создаю инфографику и хочу разместить круглый круг с границей за линией границы блока div, как показано на этом рисунке:

Как вы можете видеть на изображении, круг находится позади пути в слоях. Я пробовал использовать z-index и не могу заставить его работать. Результат, который у меня сейчас, идеален, но я не могу поместить круг позади:

.flex {
  display: flex !important;
}

.contenido {
  height: 180px;
}

.left {
  width: 33.33%;
}

.up {
  border-top: 5px solid;
  border-color: #5396C3;
}

.color {
  border-color: #5396C3;
}

.left-half {
  width: 16.667%;
}

.right-half {
  width: 16.667%;
}

.d {
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
  border-right: 5px solid;
  border-color: #5396C3;
  z-index: 8;
  position: relative;
}

.right {
  width: 33.33%;
}

.down {
  border-bottom: 5px solid;
  border-color: #5396C3;
}


/* This is the point that need to be behind */

.right-point {
  width: 40px;
  float: right;
  margin-top: 62px;
  margin-right: -23px;
  z-index: -1;
}

<div class="flex contenido">
  <div class="left up color">
  </div>
  <div class="left-half up color">
  </div>
  <div class="right-half up down d color">
    <img src="svg/work.svg" alt="" class="right-point">
  </div>
  <div class="right color">
  </div>
</div>
<div class="flex contenido">
  <div class="left ">
    <div class="flex" style="justify-content: flex-end;">
      <img src="img/vv.png" alt="" class="logo logo-left ">
    </div>
  </div>
  <div class="left-half up down c work" style="margin-top: -5px;">
    <img src="svg/work.svg" alt="" class="left-point">
  </div>
  <div class="right-half color">
  </div>
  <div class="right color">
  </div>
</div>

Почему круг не выходит за границу? В моем случае я использую SVG как круг, возможно, лучше создать круг с помощью CSS (влияет ли это даже на то, что это SVG?).

Спасибо!

Answer 1

удалите z-index и position relative из класса .d и добавьте относительное положение для .right-point

.flex {
  display: flex !important;
}

.contenido {
  height: 180px;
}

.left {
  width: 33.33%;
}

.up {
  border-top: 5px solid;
  border-color: #5396C3;
}

.color {
  border-color: #5396C3;
}

.left-half {
  width: 16.667%;
}

.right-half {
  width: 16.667%;
}

.d {
  border-top-right-radius: 500px;
  border-bottom-right-radius: 500px;
  border-right: 5px solid;
  border-color: #5396C3;
 
  
}

.right {
  width: 33.33%;
}

.down {
  border-bottom: 5px solid;
  border-color: #5396C3;
}


/* This is the point that need to be behind */

.right-point {
  width: 40px;
  float: right;
  margin-top: 62px;
  margin-right: -23px;
  z-index: -1;
   position: relative;
}

<div class="flex contenido">
  <div class="left up color">
  </div>
  <div class="left-half up color">
  </div>
  <div class="right-half up down d color">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Yin_yang.svg/1024px-Yin_yang.svg.png" alt="" class="right-point">
  </div>
  <div class="right color">
  </div>
</div>
<div class="flex contenido">
  <div class="left ">
    <div class="flex" style="justify-content: flex-end;">
      <img src="img/vv.png" alt="" class="logo logo-left ">
    </div>
  </div>
  <div class="left-half up down c work" style="margin-top: -5px;">
    <img src="svg/work.svg" alt="" class="left-point">
  </div>
  <div class="right-half color">
  </div>
  <div class="right color">
  </div>
</div>