pyramide html css

Pour toutes les discussions sur le code client, HTML et CSS
Répondre
Avatar du membre
19ROMEO93
Messages : 12
Enregistré le : 14 août 2020, 11:40
Localisation : Gap

pyramide html css

Message par 19ROMEO93 » 22 août 2020, 13:49

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

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: pyramide html css

Message par webmaster » 25 août 2020, 12:50

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 !
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Avatar du membre
19ROMEO93
Messages : 12
Enregistré le : 14 août 2020, 11:40
Localisation : Gap

Re: pyramide html css

Message par 19ROMEO93 » 26 août 2020, 13:49

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)

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: pyramide html css

Message par webmaster » 27 août 2020, 11:30

J'aime bien aussi, même si ca fait parfois mal à la tête :)
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

je-commence-demain
Messages : 13
Enregistré le : 26 juin 2020, 13:03

Re: pyramide html css

Message par je-commence-demain » 24 nov. 2020, 11:15

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. :)

Répondre