Page 1 sur 1

pyramide html css

Posté : 22 août 2020, 13:49
par 19ROMEO93
bonjour à tous après avoir conçu un Cube en perspective cavalière en html et css:

Image

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)
Image

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

Re: pyramide html css

Posté : 25 août 2020, 12:50
par 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 !

Re: pyramide html css

Posté : 26 août 2020, 13:49
par 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)

Re: pyramide html css

Posté : 27 août 2020, 11:30
par webmaster
J'aime bien aussi, même si ca fait parfois mal à la tête :)

Re: pyramide html css

Posté : 24 nov. 2020, 11:15
par 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. :)