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, 00);
  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(00, 0100%, 100%100%);
}

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

<pclass="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><pclass="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>