Creating a Pyramid using CSS and JS

Question

I have a wrapper div and many content blocks. The content block can be of any number.

<div class="wrapper">
  <div class="content-block">Something goes here</div>
  <div class="content-block">Something goes here</div>
                             .
                             .
                             .
  <div class="content-block">Something goes here</div>
</div>

I wish to form a pyramid structure using these content-blocks as it appears below:

enter image description here

Is it possible to achieve pyramid like this? The above image is just an example, there can be more than 10 content-blocks or even less.

It's possible even in the command-line, how much more CSS and JS? Reminds me of a homework in C. — Joseph
– Joseph, Commented May 2, 2012 at 9:41
You should provide more requirements. Because there are so many ways to do that, each one adapted to a given real problem. Google "css block positioning" as a starter. — Denys Séguret
– Denys Séguret, Commented May 2, 2012 at 9:43
@rory I had been experimenting with css and jquery and wanted to know if things have become easy with javascripts. I was thinking to calculate length() i.e. no of div using jquery and then providing css depending on no. of block elements. But truly, I was looking for a better approach. — Ankit
– Ankit, Commented May 2, 2012 at 9:57

Penny Liu · Accepted Answer · 2020-09-02 07:11:23Z

4

Check out this very simple JavaScript/CSS solution:

var objContainer = document.getElementById("container"),
  intLevels = 10,
  strBlocksHTML = '';

// Using innerHTML is faster than DOM appendChild
for (var i = 0; i < intLevels; i++) {
  for (var n = 0; n < i + 1; n++) {
    strBlocksHTML += '<div class="buildingBlock"></div>';
  }
  strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;

.buildingBlock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 5px;
  background-color: #eee;
  border: 2px solid #ccc;
}

#container {
  text-align: center;
}

<div id="container"></div>

edited Sep 2, 2020 at 7:11

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered May 2, 2012 at 10:49

Mastermind

844 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleg V. Volkov · Accepted Answer · 2012-05-02 10:17:29Z

2

Yes, it is perfectly possible, but hard to write down without more precise requirements. Number of divs would obviously equal number of elements = 10. Length of bottom row = (10/2 - 1) with each next row to top taking one less element, etc. Either use absolute positioning in div style or treat table as matrix and draw with cells. Table solution will be progressively slower with more rows, because all the empty "pixels" and quadratically increasing overhead on recalculating cell sizes and positions in browser.

answered May 2, 2012 at 10:17

Oleg V. Volkov

22.6k4 gold badges49 silver badges68 bronze badges

Comments

Penny Liu · Accepted Answer · 2020-09-02 07:12:13Z

2

Hm, not a trivial task. I don't think it is possible to write (finite) CSS for any number of elements. It would need something like this:

#wrapper {
  text-align: center;
}

.content-block {
  display: inline-block;
  width: 5em;
  height: 4em;
  margin: 0 2.5em;
}

.content-block:nth-child(n*(n+1)/2)::after {
  display: block;  /* linebreak */
}

Where the nth-child-selector would contain a triangular number, but it must have the form an+b.

edited Sep 2, 2020 at 7:12

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered May 2, 2012 at 10:20

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

2 Comments

Ankit Over a year ago

Thanks Bergi for your reply, but the solution from Mastermind is an easy approach. +1 for your efforts.

Bergi Over a year ago

OK, but Masterminds solution with extra-containers per row is too simple. It has another DOM than you introduced - I thought you wanted a CSS-only solution.

Collectives™ on Stack Overflow

Creating a Pyramid using CSS and JS

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related