Constructing a 3D pyramid with CSS but just need the final touch - css

Question

I'm almost there, I found the perfect CSS pyramid: https://codepen.io/SL20XX/pen/NZLGjx
But I want to apply this gradient instead of the single "#00B4FF" color:
background-image: linear-gradient(39deg, #12103E 0%, #721B34 100%);
I tried many tweaks but doesn't work. I'm confused with the "$color" variable.
How would you do?
Thanks a lot!

Answer 1

You can put a border-image on each surface rather than a border color.
This snippet does this but has to clip each surface back into a triangle shape.
Note: to get the shading effect you need to decide what linear-gradient you want for each of the lighten/darken colors in your original and subsitute those for the one linear-gradient used here.
<style>
.container {
--color: #00B4FF;
--speed: 5s;
}
.container {
width: 400px;
height: 400px;
margin: 0 auto;
position: relative;
perspective: 300px;
perspective-origin: 50% 40%;
}
.side {
position: absolute;
left: 140px;
top: 150px;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 120px solid #ccc;
transform-origin: 50% 0%;
animation: spin var(--speed) infinite linear;
}
.back {
animation-delay: calc(var(--speed) / -2);
}
.right {
animation-delay: calc(var(--speed) / -4);
}
.left {
animation-delay: calc(var(--speed) * -0.75);
}
#keyframes spin {
0% {
transform: rotateY(0deg) rotateX(30deg);
/*border-bottom-color: lighten(#0000FF, 5%);*/
border-image: linear-gradient(red, yellow);
clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
25% {
transform: rotateY(90deg) rotateX(30deg);
/*border-bottom-color: darken(#0000FF, 5%);*/
border-image: linear-gradient(red, yellow);
clip-path: polygon(0 100%, 100% 100%, 50% 0);
opacity: 1;
}
25.1% {
opacity: 0;
}
50% {
transform: rotateY(180deg) rotateX(30deg);
/*border-bottom-color: darken(#0000FF, 12%);*/
border-image: linear-gradient(red, yellow);
clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
74.9% {
opacity: 0;
}
75% {
transform: rotateY(270deg) rotateX(30deg);
/*border-bottom-color: darken(#0000FF, 15%);*/
border-image: linear-gradient(red, yellow);
clip-path: polygon(0 100%, 100% 100%, 50% 0);
opacity: 1;
}
100% {
transform: rotateY(360deg) rotateX(30deg);
/*border-bottom-color: lighten(#0000FF, 5%);*/
border-image: linear-gradient(red, yellow);
clip-path: polygon(0 100%, 100% 100%, 50% 0);
}
}
.shadow {
position: absolute;
top: 300px;
left: 175px;
width: 50px;
height: 50px;
background-color: #bbb;
box-shadow: 0 0 40px 40px #bbb;
animation: shadow var(--speed) infinite linear;
}
#keyframes shadow {
0% {
transform: rotateX(90deg) rotateZ(0deg);
}
100% {
transform: rotateX(90deg) rotateZ(-360deg);
}
}
</style>
<div class="container">
<div class="side left"></div>
<div class="side front"></div>
<div class="side right"></div>
<div class="side back"></div>
<div class="shadow"></div>
</div>