我无法使用 CSS 创建此设计？答案

【问题标题】：I'm unable to create this Design using CSS?我无法使用 CSS 创建此设计？
【发布时间】：2021-08-21 19:44:14
【问题描述】：

我想创建如下图所示的内容。

我想在这些形状中写入一些内容，如图所示，但从我的代码中，我的内容来自这些形状，并且在我的 代码中，运行我的代码屏幕大小后，您可以看到我的 div 包含间隙。

注意：我也试过W3school Css Shape.，我已经读过 Clip-path Here

重要提示：我已经尝试了所有相关的答案，但没有一个对我有帮助。

已经尝试过这些答案： Answer No.1，Answer No.2，Answer No.3，Answer No.4，Answer No.5

我想要达到的输出：

我从代码中获得的输出

<!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>

请帮助我提供源代码 我尝试了所有相关的解决方案，它们都没有帮助我。

【问题讨论】：

至少尝试使用剪辑路径值来反转第二个三角形，你已经做了第一个。有人在您的旧问题中评论了一个可以帮助您的工具：stackoverflow.com/q/68871730/8620333
中间元素是普通元素，为什么要在外面加上clip-path或者shape呢？
兄弟我尝试了所有这些都没有帮助我:(你能帮我提供源代码吗？
我也尝试过工具但不起作用:(

标签： html css

【解决方案1】：

你很亲密。我刚刚反转了您的剪辑路径和外部形状中的三角形。

.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>

【讨论】：