pyramide html css

[19ROMEO93]

bonjour à tous après avoir conçu un Cube en perspective cavalière en html et css:



HTML

Code : Tout sélectionner

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

CSS

Code : Tout sélectionner

.cube{
    position: relative;
    width: 40vmin;
    height: 40vmin;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(25deg);
}

.cube  span{
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 1px bisque;
    background: rgba(185, 43, 43, 0.5);
}

.cube  span:nth-child(1){
    transform: rotateX(0deg) translate3d(0,0,20vmin);
}

 .cube  span:nth-child(2){
    transform: rotateY(90deg) translate3d(0,0,-20vmin);
} 


.cube  span:nth-child(3){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    transform: rotateY(90deg) translate3d(0,0,20vmin);
} 

.cube  span:nth-child(4){
    border-right: dashed 2px #fff;
    border-top: dashed 2px #fff;
    transform: rotateX(90deg) translate3d(0,0,-20vmin);
} 


.cube  span:nth-child(5){
    transform: rotateX(90deg) translate3d(0,0,20vmin);
} 

.cube  span:nth-child(6){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    transform: rotateX(0deg) translate3d(0,0,-20vmin);

}

je bloque sur la réalisation d'une pyramide (même principe que le cube)


HTML

Code : Tout sélectionner

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

CSS

Code : Tout sélectionner

.pyramide{
    position: relative;
    width: 40vmin;
    height: 40vmin;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(25deg);
}

.pyramide  span{
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 1px bisque;
    background: rgba(185, 43, 43, 0.5);
}

.pyramide  span:nth-child(1){
    transform: rotateX(0deg)  translate3d(0,0,20vmin);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

 .pyramide  span:nth-child(2){
    transform: rotateY(90deg) translate3d(0,0,-20vmin);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
} 


.pyramide  span:nth-child(3){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotateY(90deg) translate3d(0,0,20vmin);

} 

.pyramide  span:nth-child(4){
    border-right: dashed 2px #fff;
    border-top: dashed 2px #fff;
    transform: rotateX(90deg) translate3d(0,0,-20vmin);
} 



.pyramide  span:nth-child(5){
    border-right: dashed 2px #fff;
    border-bottom: dashed 2px #fff;
    transform: rotateX(0deg) translate3d(0,0,-20vmin);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

Si y'en a qui ont des solutions je suis preneur

[webmaster]

Bonjour,

Très impressionnant cette mise en forme via CSS pur

Je n'ai pas la solution, mais je pense que la solution pourrait être dans la propriété CSS :

Code : Tout sélectionner

transform: matrix()

Va falloir faire chauffer les neurones !

[19ROMEO93]

Merci beaucoup, oui je code tout en html css pur sans passer par des frameworks , idem pour java script
En terme de performance ya pas photo (même si il faut plus de ligne de code)

[webmaster]

J'aime bien aussi, même si ca fait parfois mal à la tête

[je-commence-demain]

Bonjour,
Le code demande énormément d'éléments auxquels il faut penser, personnellement j'ai beaucoup de temps à tout apprendre. ^^ C'est bien ce que vous avez en tout cas et ça m'aide à avancer.