Css 如何使用以下样式制作此正方形

我需要用CSS创建这个样式，但我不能。唯一出来的是一个正方形，我已经很沮丧了。我是css新手，如果您能帮助我，我将不胜感激

谢谢

我试着在之前和之后做这件事，但都不起作用

.rectangle:before {
  right: 10%;
  border-right: 100px solid transparent;
  border-left: 100x solid;
}

.rectangle:after {
  left: 50%;
  border-left: 100px solid transparent;
  border-right: 100px solid;
}

试试这个：

#div {
  background: red;
  display: inline-block;
  height: 55px;
  margin-left: 20px;
  margin-top: 55px;
  position: relative;
  width: 100px;
}
#div:before {
  border-top: 35px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 55px;
  width: 0;
}

---

我查看了一个形状列表，发现了一些类似于您所寻找的形状。

请阅读并编辑您的问题。这两个CSS片段本身没有什么意义。@04FS好的，CSS片段真的没有用处。所以我已经删除了，谢谢！互联网上有很多关于这方面的信息：非常感谢，这正是我想要的。最后一个问题，如果我需要像图中那样把它倒过来，我怎么能做到呢？@camlefista我刚刚改变了我对你要找的东西的答案。你很好，现在我学会了怎么做，因为这让我付出了代价！再次感谢@Bodrovworth注意到它是从这里抄袭来的：所以最好表扬他们，以免被视为剽窃，这在这里是不允许的