TheNoble-Coder TheNoble-Coder - 3 months ago 23
HTML Question

Creaing a Pyramid shape using only CSS/HTML

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.

enter image description here

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

enter image description here

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

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>

Comments