css - 如何用以下样式制作这个正方形

Question

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

https://i.imgur.com/fVKVrG4.png

谢谢!

我试着用before和after来做，但它不起作用

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

Answer 1

试试这个:

#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;
}

JS Fiddle

我看了CSS Tricks查找形状列表并找到与您正在寻找的类似的东西。