I'm Unable To Create This Design Using CSS?

I want to create something like this as shown in the picture down below. I want to write some content inside these shapes as shown in Figure but from my code, my content comes out

Solution 1:

You were close. I just reversed the triangle in your clip-path and shape-outside.

.clipped-text {
  width: 500px;
  height: 200px;
  background: #1e90ff;
  text-align: justify;
  margin: 0px;
}

.clipped-text:before {
  --clipped-path: polygon(100% 100%, 100% 0, 0 0);
  content: "";
  float: right;
  width: 100%;
  height: 100%;
  background-color: white;
  shape-outside: var(--clipped-path);
  clip-path: var(--clipped-path);
}

.mirrored.clipped-text::before {
  float: left;
  --clipped-path: polygon(0 0, 0 100%, 100% 100%);
}

main {
  width: 500px;
  height: 200px;
  background-color: rgb(212, 55, 55);
  text-align: justify;
}

<p class="clipped-text">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<main>
  Some text inside it..
</main>
<p class="mirrored clipped-text">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>