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

Question

我正在尝试在 CSS 中创建一个类似金字塔的形状。 我正在使用我在互联网上读到的一种方法来做到这一点，当您将 Div 的宽度设置为 0 px 时，它的边框将连接起来创建 4 个三 Angular 形。但是我想移除/切割尖头金字塔和我一直做不到。我尝试用其他 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 个三 Angular 形和 1 个矩形。

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

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