Transparent background from the grand-parent element - html

Question

I am trying to apply to an element transparent background, but directly to the grand parent element. for example:
body {
background: linear-gradient( 45deg, rgba(5, 175, 240, 0.14), rgba(239, 77, 54, 0.14), rgba(243, 200, 57, 0.14)) fixed
}
.parent {
height: 100px;
width: 100px;
background: black;
}
.child {
height: 50px;
width: 50px;
background: // here, i want the background to reflect the body background
}
<div class="parent">
<div class="child"></div>
</div>

Answer 1

No need of span you can achieve this using clip-path CSS property
body {
background: linear-gradient( 45deg, rgba(5, 175, 240, 0.14), rgba(239, 77, 54, 0.14), rgba(243, 200, 57, 0.14)) fixed
}
div {
height: 100px;
width: 100px;
background: black;
clip-path: polygon(0% 50px, 50px 50px, 50px 0%, 85% 0%, 100% 0, 100% 15%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);
}
<div>
</div>

Answer 2

Use the same gradient for both elements
body {
--g: linear-gradient( 45deg, rgba(5, 175, 240, 0.14), rgba(239, 77, 54, 0.14), rgba(243, 200, 57, 0.14)) fixed;
background: var(--g)
}
.parent {
height: 100px;
width: 100px;
background: black;
}
.child {
height: 50px;
width: 50px;
background: var(--g);
background-color: #fff;
}
<div class="parent">
<div class="child"></div>
</div>