Bonjour, étant en train de créer un site (qui doit être responsive), pour lui ajouter un menu burger j'ai ajouté un bouton en haut à droit de l'écran qui, quand on appuis dessus, fais apparaître un menu. Ce bouton c'est tout simplement un carré avec un triangle dedans. J'ai réalisé le triangle à l'intérieur à l'aide d'un tuto que j'ai vu pour faire des formes géométriques sans image sur css. Le problème est que je galère un peu sur la responsivité d'un site, et la justement je n'arrive pas à rendre le bouton responsive. Le triangle ne change pas de dimension et le carré dans lequel est le triangle change de largeur et de longueur alors que j'aimerais qu'elle reste similaire quoi qu'il arrive (pour garder un beau carré et non un rectangle). Pour le triangle je l'ai dimensionné en px donc je me doute que ça doit être à cause de ça qu'il ne change pas de dimension, mais je ne sais pas comment le faire autrement, lorsque je met en % il disparaît complètement... Voila donc si vous savez comment m'aider ça serais super ! Merci par avance!
Je vous joins mon code CSS et HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.carre-bouton{
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: white;
    height: 12%;
    width: 6%;
    border-radius: 10px;
}
 
.triangle-bouton {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 30px solid #8e8e8e;
    margin: auto;
    margin-top: 30px;
}
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<div class="carre-bouton">
        <div class="triangle-bouton"></div> 
</div>