仅使用CSS / HTML

Question

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

呈现形状 以下是我到目前为止所做的。

所需形状 我想做的是这样的形状：

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

否则，您可以使用this online APP

轻松生成