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

Question

我正在尝试在 CSS 中创建一个类似金字塔的形状。 我正在使用我在互联网上读到的一种方法来做到这一点，当您将 Div 的宽度设置为 0 像素时，它的边框将创建 4 个三角形。 但我想remove/cut金字塔的尖头我一直做不到。我尝试用其他 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>

Answer 2

您可以使用 perspective() 和 rotateX() 来创建这样的形状

.pyramid  {
  width: 25px;
  height: 50px;
  background: blue;
  margin: 20px 100px;
  transform: perspective(6px) rotateX(11deg);
}

<div class="pyramid "></div>

Answer 3

我在蓝色大三角形的上边缘放置了一个白色小三角形

.triangle {
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 50px 150px 50px;
 border-color: transparent transparent #007bff transparent;
 position: relative;
}
.triangle::after {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 0 5px 10px 5px;
 border-color: transparent transparent #fff transparent;
 position: absolute;
 top: -1px;
 left: -5px;
}

<div class="triangle"> </div>

这里是the link to css triangle from CSS-Trick.com

否则您可以使用 this online APP

轻松生成

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

Creaing a Pyramid shape using only CSS/HTML

html

css

css-shapes