Pyramid structure with multiple layers in 3D dimensions

Question

Pyramid structure with multiple layers in 3D dimensions

Is it possible to create a 3D multi-level pyramid using CSS and HTML5? I have explored some shape generator websites, but they are not compatible with IE and FF.

For example:

I also attempted to create a 2D multi-level pyramid, but it did not meet my requirements.

.container1>div:hover {
  border-bottom: 25px lightblue solid !important;
}
#trapezoid11 {
  border-bottom: 25px solid blue;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 0px;
  margin: 0 auto;
}
#trapezoid12 {
  border-bottom: 25px solid green;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 50px;
  margin: 0 auto;
}
#trapezoid13 {
  border-bottom: 25px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 100px;
  margin: 0 auto;
}
#trapezoid14 {
  border-bottom: 25px solid blue;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 150px;
  margin: 0 auto;
}
#trapezoid15 {
  border-bottom: 25px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 200px;
  margin: 0 auto;
}
.container1 {
  width: 90%;
  margin: 0 auto;
}

<div class="container1 ">
  <div id="trapezoid11"></div>
  <div id="trapezoid12"></div>
  <div id="trapezoid13"></div>
  <div id="trapezoid14"></div>
  <div id="trapezoid15"></div>

</div>

The desired final result can be viewed here: https://i.sstatic.net/fGjDz.png

html css 3d

Answer 1

Answer №1

To create a stunning pyramid design, you can use just one HTML element along with some pseudo-elements that have gradient backgrounds:

div{
    height:150px;
    position:relative;
    transform:translate(-50%,-50%) rotate(-7deg);
    transform-origin:50% 0;
    width:200px;
    left:50%;
    top:50%;
}
div::before,div::after{
    background-origin:border-box;
    border-top:150px solid #fff;
    bottom:0;
    content:"";
    position:absolute;
    top:0;
}
div::before{
    background-image:linear-gradient(14deg,transparent 25px,#d00 25px,#d00 calc(25% + 25px),#a50 calc(25% + 25px),#a50 calc(50% + 12px),#fc0 calc(50% + 12px),#fc0 75%,#ff0 75%);
    background-position:2px 0;
    background-repeat:no-repeat;
    border-right:100px solid transparent;
    left:0;
    right:50%;
}
div::after{
    background-image:linear-gradient(-14deg,transparent 25px,#a00 25px,#a00 calc(25% + 25px),#840 calc(25% + 25px),#840 calc(50% + 12px),#da0 calc(50% + 12px),#da0 75%,#dc0 75%);
    background-position:-2px 0;
    background-repeat:no-repeat;
    border-left:100px solid transparent;
    left:50%;
    right:0;
}
html,body{background:#fff;height:100%;}

<div></div>

If you want a "usable" pyramid where you can insert content, there are a few methods available. You'll need to adjust the padding in each child div to center the content and wrap the content within tags to avoid skewing.

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#fff;height:100%;}
#pyramid{
    height:425px;
    left:50%;
    overflow:hidden;
    padding:0 0 25px;
    position:relative;
    top:50%;
    transform:translate(-50%,-50%) skewy(-5deg);
    width:500px;
}
#pyramid::before,#pyramid::after{
    background-origin:border-box;
    border-top:400px solid #fff;
    bottom:0;
    content:"";
    pointer-events:none;
    position:absolute;
    top:0;
}
#pyramid::before{
    border-right:250px solid transparent;
    left:0;
    z-index:5;
}
#pyramid::after{
    border-left:250px solid transparent;
    right:0;
    z-index:5;
}
#pyramid>div{
    height:25%;
    position:relative;
}
#pyramid>div::before,#pyramid>div::after{
    border-top:26px solid;
    bottom:-25px;
    content:"";
    pointer-events:none;
    position:absolute;
}
#pyramid>div::before{
    border-left:250px solid transparent;
    left:0;
}
#pyramid>div::after{
    border-right:250px solid transparent;
    right:0;
}
#level1{
    background:linear-gradient(90deg,#ff0 50%,#dc0 50%);
    z-index:4;
}
#level1::before{
    color:#ff0;
}
#level1::after{
    color:#dc0;
}
#level2{
    background:linear-gradient(90deg,#fc0 50%,#da0 50%);
    z-index:3;
}
#level2::before{
    color:#fc0;
}
#level2::after{
    color:#da0;
}
#level3{
    background:linear-gradient(90deg,#a50 50%,#840 50%);
    z-index:2;
}
#level3::before{
    color:#a50;
}
#level3::after{
    color:#840;
}
#level4{
    background:linear-gradient(90deg,#d00 50%,#a00 50%);
    z-index:1;
}
#level4::before{
    color:#d00;
}
#level4::after{
    color:#a00;
}
#pyramid>div>*{
    transform:skewy(5deg);
}

<section id="pyramid">
    <div id="level1"></div>
    <div id="level2"></div>
    <div id="level3"></div>
    <div id="level4"></div>
</section>

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#fff;height:100%;}
#pyramid{
    height:425px;
    left:50%;
    overflow:hidden;
    padding:0 0 25px;
    position:relative;
    top:50%;
    transform:translate(-50%,-50%) skewy(-5deg);
    width:500px;
}
#pyramid::before,#pyramid::after{
    background-origin:border-box;
    border-top:400px solid #fff;
    bottom:0;
    content:"";
    pointer-events:none;
    position:absolute;
    top:0;
}
#pyramid::before{
    border-right:250px solid transparent;
    left:0;
    z-index:5;
}
#pyramid::after{
    border-left:250px solid transparent;
    right:0;
    z-index:5;
}
#pyramid>div{
    height:25%;
    position:relative;
}
#pyramid>div::before,#pyramid>div::after{
    content:"";
    pointer-events:none;
    position:absolute;
}
#pyramid>div::before{
    border-left:250px solid transparent;
    border-right:250px solid transparent;
    border-top:26px solid;
    bottom:-25px;
    left:0;
    z-index:1;
}
#pyramid>div::after{
    border-top:125px solid rgba(0,0,0,.25);
    border-right:1200px solid transparent;
    left:50%;
    top:0;
    z-index:2;
}
#level1{
    background:#ff0;
    z-index:4;
}
#level1::before{
    color:#ff0;
}
#level2{
    background:#fc0;
    z-index:3;
}
#level2::before{
    color:#fc0;
}
#level3{
    background:#a50;
    z-index:2;
}
#level3::before{
    color:#a50;
}
#level4{
    background:#d00;
    z-index:1;
}
#level4::before{
    color:#d00;
}
#pyramid>div>*{
    transform:skewy(5deg);
    position:relative;
    z-index:3;
}

<section id="pyramid">
    <div id="level1"></div>
    <div id="level2"></div>
    <div id="level3"></div>
    <div id="level4"></div>
</section>

Answer 2

To create a stunning pyramid design, you can use just one HTML element along with some pseudo-elements that have gradient backgrounds:

div{
    height:150px;
    position:relative;
    transform:translate(-50%,-50%) rotate(-7deg);
    transform-origin:50% 0;
    width:200px;
    left:50%;
    top:50%;
}
div::before,div::after{
    background-origin:border-box;
    border-top:150px solid #fff;
    bottom:0;
    content:"";
    position:absolute;
    top:0;
}
div::before{
    background-image:linear-gradient(14deg,transparent 25px,#d00 25px,#d00 calc(25% + 25px),#a50 calc(25% + 25px),#a50 calc(50% + 12px),#fc0 calc(50% + 12px),#fc0 75%,#ff0 75%);
    background-position:2px 0;
    background-repeat:no-repeat;
    border-right:100px solid transparent;
    left:0;
    right:50%;
}
div::after{
    background-image:linear-gradient(-14deg,transparent 25px,#a00 25px,#a00 calc(25% + 25px),#840 calc(25% + 25px),#840 calc(50% + 12px),#da0 calc(50% + 12px),#da0 75%,#dc0 75%);
    background-position:-2px 0;
    background-repeat:no-repeat;
    border-left:100px solid transparent;
    left:50%;
    right:0;
}
html,body{background:#fff;height:100%;}

<div></div>

If you want a "usable" pyramid where you can insert content, there are a few methods available. You'll need to adjust the padding in each child div to center the content and wrap the content within tags to avoid skewing.

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#fff;height:100%;}
#pyramid{
    height:425px;
    left:50%;
    overflow:hidden;
    padding:0 0 25px;
    position:relative;
    top:50%;
    transform:translate(-50%,-50%) skewy(-5deg);
    width:500px;
}
#pyramid::before,#pyramid::after{
    background-origin:border-box;
    border-top:400px solid #fff;
    bottom:0;
    content:"";
    pointer-events:none;
    position:absolute;
    top:0;
}
#pyramid::before{
    border-right:250px solid transparent;
    left:0;
    z-index:5;
}
#pyramid::after{
    border-left:250px solid transparent;
    right:0;
    z-index:5;
}
#pyramid>div{
    height:25%;
    position:relative;
}
#pyramid>div::before,#pyramid>div::after{
    border-top:26px solid;
    bottom:-25px;
    content:"";
    pointer-events:none;
    position:absolute;
}
#pyramid>div::before{
    border-left:250px solid transparent;
    left:0;
}
#pyramid>div::after{
    border-right:250px solid transparent;
    right:0;
}
#level1{
    background:linear-gradient(90deg,#ff0 50%,#dc0 50%);
    z-index:4;
}
#level1::before{
    color:#ff0;
}
#level1::after{
    color:#dc0;
}
#level2{
    background:linear-gradient(90deg,#fc0 50%,#da0 50%);
    z-index:3;
}
#level2::before{
    color:#fc0;
}
#level2::after{
    color:#da0;
}
#level3{
    background:linear-gradient(90deg,#a50 50%,#840 50%);
    z-index:2;
}
#level3::before{
    color:#a50;
}
#level3::after{
    color:#840;
}
#level4{
    background:linear-gradient(90deg,#d00 50%,#a00 50%);
    z-index:1;
}
#level4::before{
    color:#d00;
}
#level4::after{
    color:#a00;
}
#pyramid>div>*{
    transform:skewy(5deg);
}

<section id="pyramid">
    <div id="level1"></div>
    <div id="level2"></div>
    <div id="level3"></div>
    <div id="level4"></div>
</section>

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:#fff;height:100%;}
#pyramid{
    height:425px;
    left:50%;
    overflow:hidden;
    padding:0 0 25px;
    position:relative;
    top:50%;
    transform:translate(-50%,-50%) skewy(-5deg);
    width:500px;
}
#pyramid::before,#pyramid::after{
    background-origin:border-box;
    border-top:400px solid #fff;
    bottom:0;
    content:"";
    pointer-events:none;
    position:absolute;
    top:0;
}
#pyramid::before{
    border-right:250px solid transparent;
    left:0;
    z-index:5;
}
#pyramid::after{
    border-left:250px solid transparent;
    right:0;
    z-index:5;
}
#pyramid>div{
    height:25%;
    position:relative;
}
#pyramid>div::before,#pyramid>div::after{
    content:"";
    pointer-events:none;
    position:absolute;
}
#pyramid>div::before{
    border-left:250px solid transparent;
    border-right:250px solid transparent;
    border-top:26px solid;
    bottom:-25px;
    left:0;
    z-index:1;
}
#pyramid>div::after{
    border-top:125px solid rgba(0,0,0,.25);
    border-right:1200px solid transparent;
    left:50%;
    top:0;
    z-index:2;
}
#level1{
    background:#ff0;
    z-index:4;
}
#level1::before{
    color:#ff0;
}
#level2{
    background:#fc0;
    z-index:3;
}
#level2::before{
    color:#fc0;
}
#level3{
    background:#a50;
    z-index:2;
}
#level3::before{
    color:#a50;
}
#level4{
    background:#d00;
    z-index:1;
}
#level4::before{
    color:#d00;
}
#pyramid>div>*{
    transform:skewy(5deg);
    position:relative;
    z-index:3;
}

<section id="pyramid">
    <div id="level1"></div>
    <div id="level2"></div>
    <div id="level3"></div>
    <div id="level4"></div>
</section>

Pyramid structure with multiple layers in 3D dimensions

Answer №1

Similar questions

png showing the backdrop, not the background image

socket.io and the use of various chat rooms

Updating style of element in EJS following POST request in Node.js using Express

arrange and position elements using bootstrap's grid system

Storing a webpage in HTML with the use of @import function in CSS

Having problems with jQuery's document.on hover toggle method?

What is the reason for the website allowing me to scroll towards the right?

"Utilizing a media query to display an anchor link at the top based

Unable to locate the JavaScript/jQuery key

Ways to correct a jQuery error

Dynamic content is not present on the Nivo Slider

Extracting information from the 'View all responses' feature

Guide to altering the color of the row that is clicked in a table using css and jquery

Generate individual CSS files using postcss and rollup

Avoiding a line break between two <form> tags is essential for maintaining the structure of your webpage

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

Using jQuery to toggle the visibility of divs depending on the selection of multiple checkboxes

Increase the size of images on the same screen with a click using WP Metas

The scraping code built on Selenium encounters an issue with the NoSuchElementException error

Putting a Pause on CSS Transition using jQuery