Child Element Disappears After Clip-path Added

For a design project I'm doing, I want to put a clip-path on my secondary content. However, after putting the clip-path code, some of the children or elements are disappearing on m

Solution 1:

This is the logical result of the clip-path because it will clip the element and its content.

You can replace clip-path with a simple background in this case:

.clip-path {
  clip-path: polygon(70%51%, 100%0, 100%100%, 0100%, 079%);
  background: red;
}
.background {
  background:
    linear-gradient(to bottom right,transparent 49.8%,red 50%) right       /59%100%,
    linear-gradient(to bottom right,transparent 49.8%,red 50%) bottom right/153%61%;
  background-repeat:no-repeat;
}

.box { 
  padding: 10px;
  margin:10px;
  font-size:25px;
  border:1px solid;
}

<divclass="clip-path box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div><divclass="background box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div>