I'm unable to create this Design using CSS?

Question

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 from these shapes, and In my code, my div containing gaps as you can see after running my code Screen Size.

Note : I already tried W3school Css Shape. also, I'm already read about Clip-path Here

Important: I already tried all related answers but none of them helpful for me.

Already Tried these answers : Answer No.1 , Answer No.2 , Answer No.3 , Answer No.4 , Answer No.5

Output I want to achive:

Output I'm getting from my Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
     .clipped-text  {
  width: 500px;
  height: 200px;
  background: #1e90ff;
  text-align: justify;
}

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

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

.clipped:before {
  content:"";
  float:right;
  width: 100%;
  height: 100%;
background-color: rgb(212, 55, 55);
  shape-outside: inset(100% 100%, 100% 0, 0 0);
  clip-path:     inset(100% 100%, 100% 0, 0 0);
}

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

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

    </style>
<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>
  <div class="clipped">Some text inside it..
  
</div>
<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>
</body>
</html>

Help me with the Source Code please I tried All of the related solutions none of them are helping me.

at least try to play with the clip-path value to invert the second trinagle, you already did the first one. someone commented in your old question a tool to help you with : https://stackoverflow.com/q/68871730/8620333 — Temani Afif, Aug 21 '21 at 11:23
and the middle element is a common element, why adding clip-path or shape outside to it? — Temani Afif, Aug 21 '21 at 11:25
Bro I tried all of these nothing helped me :( can you please help me with source code? — , Aug 21 '21 at 11:27

score 2 · Accepted Answer · answered Aug 21 '21 at 11:44

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>

I'm unable to create this Design using CSS?

1 Answers1

Linked