Prince sodhi Prince sodhi - 3 months ago 35
CSS Question

3D multi level pyramid

I have an question, Im not sure if it is possible to make 3D multi level pyramid in CSS and HTML5. There are some Shape generator websites. But there are not compatible with IE and FF.

Eg: http://tt-cc.cc/css3-3d-shape-generator/

https://github.com/imwr/css3-3d-shape-generator

I have also tried with 2D multi level pyramid but its not fulfill 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>





This should be final result enter image description here

Answer

This can be achieved with a single HTML element and a couple of pseudo-elements with 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>

Or you can create a "usable" pyramid (one you can actually drop content into) using one of the following methods. You'll need to play around with the padding in each child div in order to move the content in from the edges and the content within each div will need to be wrapped in tags in order to reset the 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>

Comments