3 sided pyramid using CSS?

Question

I'm trying to create a 3 sided pyramid using CSS. I'm not sure if this even possible!

I can create a 4 sided normal pyramid like the one below but I am stuck with the 3 sided and I have no idea how to do this.

This is what i have so far:

@-webkit-keyframes spin {
 from { -webkit-transform: rotateY(0); }
 to { -webkit-transform: rotateY(360deg); }
}

.pyramid-gyro {
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -100px;
 -webkit-perspective: 1000px;
 -webkit-perspective-origin: 50% 100px;
}
.pyramid-axis {
 position: relative;
 width: 200px;
 -webkit-transform-style: preserve-3d;
  -webkit-animation: spin 16s infinite linear;
}

.pyramid-wall {
 position: absolute;
  border: 100px solid transparent;
}

.front {
  bottom: -20px;
  border-bottom: 200px solid red;
 -webkit-transform: translateZ(25px) rotateX(30deg);
}
.back {
  bottom: -20px;
  border-bottom: 200px solid blue;
 -webkit-transform: translateZ(-25px) rotateY(180deg) rotateX(30deg);
}
.left {
  bottom: -20px;
  left: 75px;
  border-bottom: 200px solid green;
 -webkit-transform: rotateY(270deg) translateX(-100px) rotateX(30deg);
 -webkit-transform-origin: center left;
}
.right {
  bottom: -40px;
  right: 150px;
  border-bottom: 200px solid orange;
  -webkit-transform: rotateY(-270deg) translateX(100px) rotateX(30deg);
 -webkit-transform-origin: top right;
}
.bottom {
  width: 200px;
  height: 200px;
  background: #eec26f;
  -webkit-transform: rotateX(90deg) translateY(100px);
 -webkit-transform-origin: bottom center;
}
.shadow {
  position: absolute;
  top: 250px;
  width: 0;
  height: 0;
  box-shadow: 0 0 50px 100px rgba(0,0,0,0.5);
  -webkit-transform: rotateX(90deg) translateX(100px);
}

<div class="pyramid-gyro">
  <div class="pyramid-axis">
    
    <div class="pyramid-wall front"></div>
    <div class="pyramid-wall back"></div>
    <div class="pyramid-wall left"></div>
    <div class="pyramid-wall right"></div>
    
    <div class="bottom"></div>
    <div class="shadow"></div>
  </div>
</div>

Could someone please advice on this issue or point me in a right direction?

Thanks in advance.

Did you create that 4 sided pyramid? If you did you've covered all the concepts already? — Royal Wares, Oct 25 '18 at 11:29
This will helps you- https://stackoverflow.com/questions/38157350/constructing-a-3d-pyramid-with-css — Mukul Kant, Oct 25 '18 at 11:38
Duplicate: https://stackoverflow.com/questions/38157350/constructing-a-3d-pyramid-with-css — Rob, Oct 25 '18 at 13:30

score 2 · Accepted Answer · answered Oct 25 '18 at 13:03

First you start by creating the base which is a triangle:

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,red 50%) left,
     linear-gradient(to bottom left, transparent 49%,red 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:10px;
}

<div class="pyramide">

</div>

Then you can create the same and use some rotation to place it correctly:

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,var(--c,red) 50%) left,
     linear-gradient(to bottom left, transparent 49%,var(--c,red) 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:10px;
  position:relative;
}
.pyramide:before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;left:0;right:0;bottom:0;
  filter:grayscale(80%); /*to change the color and avoid repeating the gradient*/
  background:inherit;
  transform-origin: bottom;
  transform: rotateX(-72deg);
}

<div class="pyramide"></div>

Now lets rotate everything and add the 3D effect so we can see how it looks:

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,var(--c,red) 50%) left,
     linear-gradient(to bottom left, transparent 49%,var(--c,red) 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:50px;
  position:relative;
  transform-style: preserve-3d;
  transform: rotateX(77deg) rotateZ(67deg);
}
.pyramide:before {
  content:"";
  position:absolute;
  z-index:1;
  top:0;left:0;right:0;bottom:0;
  filter:grayscale(80%); /*to change the color and avoid repeating the gradient*/
  background:inherit;
  transform-origin: bottom;
  transform: rotateX(-72deg);
}

<div class="pyramide"></div>

Actually we have the base and one side, we simply need to do almost the same to have the other sides

.pyramide {
  --w:100px;
  height:calc(0.866 * var(--w));
  width:var(--w);
  display:inline-block;
  background:
     linear-gradient(to bottom right, transparent 49%,var(--c,red) 50%) left,
     linear-gradient(to bottom left, transparent 49%,var(--c,red) 50%) right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  margin:50px;
  position:relative;
  transform-style: preserve-3d;
  animation:change 5s linear alternate infinite;
  display:inline-block;
}
.pyramide:before,
.pyramide:after,
.pyramide span{
  content:"";
  position:absolute;
  z-index:1;
  top:0;left:0;right:0;bottom:0;
  filter:grayscale(80%); /*to change the color and avoid repeating the gradient*/
  background:inherit;
  transform-origin: bottom;
  transform: rotateX(-72deg);
}
.pyramide:after {
  filter:hue-rotate(90deg); 
  transform-origin: bottom right;
  transform: rotateZ(60deg) rotateX(-110deg);
}
.pyramide span {
  filter:hue-rotate(200deg);
  transform-origin: bottom left;
  transform: rotateZ(-60deg) rotateX(-110deg);
}

@keyframes change {
  from {transform: rotateX(77deg) rotateZ(67deg);}
  to { transform: rotateX(-160deg) rotateZ(0deg);}
}

<div class="pyramide"><span></span></div>

<div class="pyramide" style="--w:200px;"><span></span></div>

3 sided pyramid using CSS?

1 Answers1