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

您可以在第二个Div上按以下方式使用clip-path属性

.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>

有没有办法通过底层组件进行射线照相

1 个答案: