28234 sujets

CSS et mise en forme, CSS3

[Résolu] J'ai bidouillé une étoile, à partir d'une base récupérée.

Bonjour !

J'ai bidouillé une étoile, à partir d'une base récupérée sur le web. Cela marche impec sur mon ordinateur, mais pas sur mon smartphone. Une idée ?



<hr class="stars" id="etoile" onclick="location.reload();" />

<style>

#etoile { font-size:5%; }
.stars:before, .stars:after { content:''; position: absolute; }

.stars 
{ 
width:0; height:0;
border:100ex transparent solid; 
border-bottom: 70ex solid; 
transform: rotate(35deg); 
}

.stars:before 
{       
border-left: 30ex solid transparent ;
border-right: 30ex solid transparent ;
border-bottom: 80ex solid;
  
top: -45ex; left: -65ex; 
transform: rotate(-35deg);
}
    
.stars:after 
{            
border-left: 100ex solid transparent;
border-right: 100ex solid transparent;
border-bottom: 70ex solid;
 
top: 3ex; left: -105ex; 
transform: rotate(-70deg);
}

</style>
Bonjour. Effectivement, votre code ne fonctionne pas et on pourrait y remédier, mais bon...
Je ne suis pas contre les défis en CSS, mais lorsque l'on a la possibilité d'éviter le bricolage pour faire ça bien propre en SVG pourquoi se priver :
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1181">
  <path d="m633 52-23 69-37 113-51 153-24 75H262l-236 1 38 28 189 135 152 110c2 2 6-10-42 134l-62 192a97705 97705 0 0 1-39 118c1 0-23 18 192-136l187-135 3-2 76 55 306 219-11-34-34-105-81-247-19-57 190-138 190-137-236-1H790l-17-50-40-123-56-170-33-99-11 32z"/>
</svg>
Ressource inspirante il est vrai. Mais ces résultats à grands coups de pseudo-elements sont souvent issus de tâtonnements pour le moins peu intuitifs. Par exemple, pour l'exemple qui nous occupe :
    #star-five {
      margin: 50px 0;
      position: relative;
      display: block;
      color: red;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
    }
    #star-five:before {
      border-bottom: 80px solid red;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    #star-five:after {
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

Surtout qu'en plus, avec les progrès de CSS, on peu utiliser la propriété clip-path (toujours pour une étoile à 5 branches) :
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

Modifié par Olivier C (04 Feb 2022 - 14:34)
Modérateur
Et l'eau,

l'unité de mesure "ex" est-elle supportée sur mobile ? Personnellement, je ne l'ai jamais utilisée.
Modifié par niuxe (04 Feb 2022 - 23:33)
Modérateur
Olivier C a écrit :

Surtout qu'en plus, avec les progrès de CSS, on peu utiliser la propriété clip-path (toujours pour une étoile à 5 branches) :
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);


Je suis aussi pour clip-path bien supporter de nos jours, avec un aspect-ratio1/1; en plus pour s'assurer que l'on n'a pas une étoile qui s’étire dans un sens ou un autre.

cdt
J'avais aussi pensé à l'Unicode, mais son utilisation est hasardeuse car différemment interprété selon les environnements (ex. : Ok sur desktops, rien sur un Android, gliphe légèrement plus petite sur ce navigateur que sur tel autre). Ceci dit, à une époque, j'avais fait quelques essais sur certaines glyphes très standard et, de mémoire, l'étoile à 5 branches était un unicode qui se comportait assez bien partout. Encore faut-il savoir quelle glyphe car il y en a plusieurs.

Pour clip-path, je l'utilise beaucoup, mais attention à ses performances, notamment sur Firefox ou les icônes "bavent" beaucoup si on utilise aussi transform:translate. Il faut bien vérifier le rendu sur tous les navigateurs.
Modifié par Olivier C (05 Feb 2022 - 07:55)
Bonsoir,

et merci de vos contributions !

Le code suivant fonctionne de manière satisfaisante :

<div class="stars" id="etoile"></div>



<style>

/* paramétrage de l'objet */
#etoile { font-size:.5px; color:red; }

/* classe générique */
.stars:before, .stars:after { content:''; position: absolute; }

.stars 
{ 
width:0; height:0; content:'';
border:100ex transparent solid; 
border-bottom: 70ex solid; 
transform: rotate(35deg); 
}

.stars:before 
{       
border-left: 30ex solid transparent;
border-right: 30ex solid transparent;
border-bottom: 80ex solid;
  
top: -45ex; left: -65ex;
transform: rotate(-35deg);
}
    
.stars:after 
{            
border-left: 100ex solid transparent;
border-right: 100ex solid transparent;
border-bottom: 70ex solid;
 
top: 3ex; left: -105ex;      
transform: rotate(-70deg);
}

</style>


Remarques :
* l'élément doit être un block à deux balises;
* sa taille se règle avec font-size, en pixels;
* sa couleur se règle avec color.
niuxe a écrit :
L'unité de mesure "ex" est-elle supportée sur mobile ? Personnellement, je ne l'ai jamais utilisée.

Intéressante, je ne connaissais pas et je suis allé me renseigner : elle s'apparente à em mais se base sur la hauteur des lettres minuscules. Pas mal pour les cas d'utilisation exposant ou souscription (sub ou sup). Pour d'autres cas d'utilisation, je ne vois pas trop.
dagobert a écrit :
Le code suivant fonctionne de manière satisfaisante [...]
Remarques :
* l'élément doit être un block à deux balises;
* sa taille se règle avec font-size, en pixels;
* sa couleur se règle avec color.

Oui bien sûr, "ça marche", mais c'est un cas d'utilisation bien spécifique, que cette forme rend possible (et encore non sans mal).
Mais vous auriez pu imaginer avoir sur votre site des dizaines de formes de ce genre, et même des icônes bien plus complexes, en les normalisant pour vos besoins avec une seule et même technique. SVG rendait possible cela, avec une personnalisation à outrance et surtout sans bricolage (alors c'est surtout en CSS, mais il faut quand même deux balises HTML...). Mais bon, au final, vous seul connaissez vos besoins.
Modifié par Olivier C (06 Feb 2022 - 05:44)
Sujet clos
Aller à