仅使用CSS/HTML创建金字塔形状

Question

我试图在CSS中创建一个像金字塔形状的金字塔.我正在使用我在互联网上阅读的方法来做到这一点,当你将Div的宽度设置为0 px时,它的边框将连接创建4个三角形.但我想删除/切割金字塔的尖端,我无法做到.我试着用其他DIV隐藏提示,但看起来不对.

现在的形状: 以下是我到目前为止所做的.

所需形状: 我想要制作的是这样的形状:

这是我的代码:

#pyramid {
  width: 0px;
  border-left: 20px dotted transparent;
  border-right: 20px solid transparent;
  border-bottom: 50px solid blue;
}

<div id="pyramid"></div>

Answer 1

向div添加任何宽度都可以解决问题.这样做,你实际上有3个连接的数字:2个三角形和1个矩形.

#pyramid {
  width: 5px;
  border-left: 20px dotted transparent;
  border-right: 20px solid transparent;
  border-bottom: 50px solid blue;
}

<div id="pyramid"></div>