Transparent background from the grand-parent element-CodePudding

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 >
  <div ></div>
</div>

CodePudding user response：

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>

CodePudding user response：

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 >
  <div ></div>
</div>