Pourquoi mon pointeur triangulaire centré horizontalement se déplace-t-il lors du redimensionnement ?

Centrage horizontal du pointeur triangulaire rencontrant des problèmes lors du redimensionnement de l'écran

Énoncé du problème

L'utilisateur a l'intention de centrer horizontalement un triangle pointeur dans un élément conteneur. Bien qu'il réussisse dans certaines tailles de fenêtre, le pointeur se désaligne lorsque la fenêtre est redimensionnée.

Solution

Comprendre le problème :

La tentative initiale de centrer le pointeur avec la gauche : 48 % positionne le pointeur en fonction de son bord gauche. Cette approche ne tient pas compte de la largeur de l'élément, ce qui entraîne un désalignement lorsque la taille de la fenêtre change.

Utiliser la transformation pour obtenir le centrage :

Pour centrer correctement le triangle, il est recommandé d'utiliser la propriété transform :

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

Cette règle décale la position du triangle de 50% de sa largeur, en le centrant efficacement dans le conteneur.

Combinaison de transformation avec Rotation :

Dans ce scénario spécifique, l'élément triangulaire a également une transformation : rotation(45deg) appliquée. Cependant, les règles en cascade CSS remplacent la première transformation par la seconde, empêchant le centrage horizontal.

Pour résoudre ce problème, enchaînez les fonctions de transformation :

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

Plusieurs fonctions de transformation peuvent être utilisées ensemble, postuler dans l’ordre dans lequel ils sont répertoriés. Dans ce cas, la traduction est appliquée en premier, suivie de la rotation.

Extrait de code complet :

body {
    background: #333333;
}

.container {
    width: 98%;
    height: 80px;
    line-height: 80px;
    position: relative;
    top: 20px;
    min-width: 250px;
    margin-top: 50px;
}

.container-decor {
    border: 4px solid #C2E1F5;
    color: #fff;
    font-family: times;
    font-size: 1.1em;
    background: #88B7D5;
    text-align: justify;
}

.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;
}

<div class="container container-decor">great distance</div>

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!