Bonjour, 

Je souhaiterai créer une page pour l'entrée d'un site qui serait en faite un carré coupé par la diagonale.

Avec un bouton au milieu qui lorsqu'on y clique dessus enroule les deux parties du carré vers les deux extrémitées du site un peux comme un rideau qui s'ouvrirais ou une page d'un livre qu'on tournerais.

Quelqu'un serait comment s'y prendre ? 

Hello !

Je te propose une solution.

A la fin de ta page, c'est à dire à la suite de tes divers élements html, tu ajoutes ceci :

<!-- les éléments sont au-dessus -->
<div id=r1 class=rideau></div>
<div id=r2 class=rideau>
</body>

Et ce CSS :

.rideau {
    background-color: #fbb;
    position: absolute;
    top:0;
    width:50%;
    height:100%;
    animation-delay: 0.5s;
    animation-duration: 2s;
    animation-name: ouvrerideau;
    animation-fill-mode: forwards;
}
#r1 {
    float: left;
}
#r2 {
    float: right;
    right:0;
}
@keyframes ouvrerideau {
    from { max-width:50%}
    to { max-width:0%}
}

Tu devras peut-être ajouter un z-index à la classe rideau s'ils ne couvrent pas l'intégralité de ta page, c'est à dire que si d'autre éléments ont déjà un z-index, il faudra en donner un plus grand pour les rideaux.

A savoir que si tu as une image de fond représentant des rideaux, et non une simple couleur, tu pourras modifier l'animation en jouant sur la propriété transform: scale (plutôt que sur le max-width) qui les feront s'écraser sur eux-même un peu comme le font les vrais rideaux.

PS : Les rideaux que je te propose ne sont pas « coupés par la diagonale » comme tu l'as écrit mais verticaux. J'ai supposé que tu t'es trompé de substantif en lisant la suite de ta demande.

Cordialement.

-
Edité par Domi65 14 janvier 2021 à 12:16:51