Discussion :

[Redelta]

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>

[Invité]

Bonjour,

Une solution :

Code css :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.carre-bouton{
  position: fixed;
  top: 5px;
  left: 5px;
  background-color: white;
  height: 36px;
  width: 36px;
  border-radius: 10px;
}
.triangle-bouton {
  position: absolute;
  top: 10px;
  left: 6px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #8e8e8e;
}
/* TABLET */
@media screen and (min-width:768px) {
  .carre-bouton{
    height: 48px;
    width: 48px;
  }
  .triangle-bouton {
    top: 10px;
    left: 6px;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 30px solid #8e8e8e;
  }
}

• http://apps.eky.hk/css-triangle-generator/

[Redelta]

ah super ça marche! merci beaucoup!

Si je peux me permettre de te demander pour être sur d'avoir compris, le changement c'est que le @media screen and (min-width:768px) permet de donner une dimension qui ne changera pas tant que la dimension de l'écran est égale à min-width ? et puis la taille que prend le bouton quand l'écran est réduit au maximum c'est la taille qui est assignée dans le .carre-bouton{} du code CSS ?