Creaing a Pyramid shape using only CSS/HTML

Question

I am trying to create a pyramid like shape in CSS. I am doing it with a method I read about on internet that when you set the width of a Div to 0 px its borders will join creating 4 triangles. But I want to remove/cut the pointed tip of the pyramid and I have been unable to do it. I tried hiding tip with other DIV but that does not looks right.

Present shape: Below is what I have made so far.

Required shape: What I want to make is a shape like this:

Here is my code:

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

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

Answer 1

Adding any width to your div will do the trick. Doing so, you'll in fact have 3 connected figures: 2 triangles and 1 rectangle in between.

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

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

Answer 2

You can use perspective() and rotateX() to create shape like this

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

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

Answer 3

I've placed a small white triangle at top edge of a Big blue Triangle

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

Here is the link to css triangle from CSS-Trick.com

Else you can generate easily using this online APP