Есть ли способ рентгенографии через слои базовых компонентов

Question

Описание задачи:

Существует элемент, который содержит другой элемент, который, в свою очередь, содержит другой элемент (теоретически может быть последовательность внутренних элементов).Последний элемент имеет прозрачный фон.Задача состоит в том, чтобы эта прозрачность полностью доходила до фона первого внешнего элемента.

Таким образом, в приведенном ниже примере фон области .shouldRadiographElement должен быть желтым в качестве фонаэлемент .wrapper.

Если требуются пояснения к задаче, просим в комментариях.

.wrapper {
  width: 200px;
  height: 200px;
  background: yellow;
}

.element {
  width: 100px;
  height: 100px;
  background: green;
}

.shouldRadiographElement {
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background: transparent;
}

<div class="wrapper">
  <div class="element">
    <div class="shouldRadiographElement"></div>
  </div>
</div>

Answer 1

Вы можете использовать свойство clip-path следующим образом для второго Div

.wrapper {
  width: 200px;
  height: 200px;
  background: yellow;
}

.element {
  width: 100px;
  height: 100px;
  background: green;
  clip-path: polygon(0% 0%, 0 54%, 0 55%, 0 0, 55% 0, 56% 53%, 0 53%, 0 100%, 
  100% 100%, 100% 0%);
}

.shouldRadiographElement {
  width: 50px;
  height: 50px;
  border: 1px solid white;
  background: transparent;
}

<div class="wrapper">
  <div class="element">
    <div class="shouldRadiographElement"></div>
  </div>
</div>