Comment centrer parfaitement un élément triangulaire horizontalement lors du redimensionnement d'une fenêtre ?

Maintenir le centrage horizontal d'un élément lors du redimensionnement de la fenêtre

Problème :
Centrer un élément horizontalement via CSS peut être délicat lors du redimensionnement de la fenêtre, en particulier pour les éléments à forme triangulaire shape.

Résoudre le problème :
Pour garantir qu'un élément reste centré horizontalement quelle que soit la taille de la fenêtre, il est essentiel d'utiliser la propriété CSS correcte et de comprendre comment fonctionne le positionnement des éléments. Bien que le réglage à gauche : 50 % puisse sembler intuitif, il positionne en fait l'élément en fonction de son bord gauche, et non du centre.

Solution : Transformer et traduire
Pour obtenir un véritable centrage horizontal , il est courant d'utiliser la propriété transform:translate(). Cette propriété demande à l'élément de se décaler vers l'arrière d'un pourcentage spécifié de sa largeur, le centrant ainsi sur l'axe souhaité.

Application de la transformation au code existant
Dans le code fourni, l'élément triangle est initialement positionné avec gauche : 48%, ce qui le place proche du centre mais incorrectement. Pour ajuster cela, nous pouvons utiliser la règle transform: translation(-50%, 0) pour décaler l'élément de 50 % de sa largeur, en garantissant qu'il est parfaitement centré.

Chaînage des transformations
Cependant, le code fourni inclut également une propriété transform:rotate(45deg), qui est appliquée avant transform:translate(-50%, 0). Cela entraîne l'ignorance de la règle transform:translate() en raison de la cascade CSS.

Pour tenir compte de cela, nous pouvons combiner les deux transformations en utilisant la capacité de la propriété transform à enchaîner les fonctions. La règle CSS finale pour l'élément triangle sera :

.container::before {
    top: -33px;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    position: absolute;
    border: solid #C2E1F5;
    border-width: 4px 0 0 4px;
    background: #88B7D5;
    content: '';
    width: 56px;
    height: 56px;
}

En enchaînant les fonctions de transformation dans cet ordre (translate() d'abord, suivi de rotate()), nous nous assurons que l'élément est d'abord décalé vers l'arrière. de 50 % de sa largeur puis pivoté de 45 degrés. Cela garantit que le triangle reste centré horizontalement même lorsque la fenêtre est redimensionnée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!