如何使用 CSS 创建和排列这样的形状？

Question

需要一些帮助来阐明如何在不使用 Bootstrap 或 Grid 的情况下创建响应式形状并将它们居中？ （每个三角形分成两部分，不同的 colors，）谢谢你的帮助，

在此处输入图像描述

Answer 1

为自己创建不同形状的最佳指南……您可以使用本指南创建任何形状。

https://css-tricks.com/the-shapes-of-css/适合您的情况

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}


#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}