Comment créer des cercles en pointillés avec un espacement uniforme?

16

Je voulais faire un cercle en pointillé avec CSS et je l'ai créé avec le processus suivant.

Bien que le cercle en pointillés puisse être affiché par ce processus, l'écart entre la fin et le début de la ligne en pointillés est devenu étroit et l'écart n'était pas uniforme.

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}
<div class="c"></div>
Développer l'extrait

Existe-t-il un moyen d'uniformiser l'écart? pouvons-nous également contrôler l'écart entre les tirets?

Si cela n'est pas possible avec CSS seul, nous envisageons d'utiliser JavaScript ou quelque chose de similaire.

javascript html css Temani Afif
la source
4
Pour ce que ça vaut, seuls Chrome (et les clones, je suppose) semblent avoir des problèmes avec votre code.
Álvaro González
3
Oui. Ça me va
Strawberry

Réponses:

14

Voici une version optimisée de la conic-gradient()solution où vous pouvez facilement contrôler le nombre de tirets et l'espace entre

Afficher l'extrait de code

Pour avoir une transparence totale, nous considérons mask

Afficher l'extrait de code

Cercle en pointillés CSS avec espace uniforme

Pour rendre les choses drôles, nous pouvons même envisager une coloration plus complexe des tirets:

Afficher l'extrait de code

Tirets CSS transparents avec gradient conique et masque

Vous pouvez à coup sûr vouloir du contenu à l'intérieur afin de mieux appliquer le masque / arrière-plan sur un pseudo-élément pour éviter de masquer le contenu:

Afficher l'extrait de code

Question connexe pour obtenir plus d'idées CSS pour obtenir un résultat similaire: Graphique en secteurs CSS uniquement - Comment ajouter un espacement / un remplissage entre les tranches? . Vous trouverez des moyens plus pris en charge que conic-gradient()(en fait, cela ne fonctionne pas sur Firefox), mais vous devez utiliser beaucoup de code contrairement à la solution ci-dessus où un seul élément est nécessaire.

En utilisant SVG, vous aurez également besoin de calculs pour vous assurer d'avoir un espacement uniforme:

svg {
  width:200px;
}
<svg viewBox="-3 -3 106 106">
  <!-- 
    The circumference of the circle is 2*PI*R ~ 314.16
    if we want N dashed we use d=314.16/N
    For N = 20 we have d=15.71
    For a gap of 5 we will have "10.71,5" (d - gap,gap)
  -->
  <circle cx="50" cy="50" r="50" 
    stroke-dasharray="10.71, 5" 
    fill="transparent" 
    stroke="black" 
    stroke-width="5" />
</svg>
Développer l'extrait

Avec les variables CSS, nous pouvons le rendre plus facile, mais il n'est pas pris en charge dans tous les navigateurs (en fait, cela ne fonctionne pas dans Firefox)

Afficher l'extrait de code

Tirets d'espace uniforme SVG

Nous pouvons également facilement utiliser le SVG comme arrière-plan pour rendre les choses plus flexibles:

Afficher l'extrait de code

Lorsqu'il est utilisé comme arrière-plan, vous devez définir manuellement la valeur de sorte que vous aurez besoin d'un arrière-plan différent à chaque fois. Nous pouvons seulement rendre la couleur facile à changer en utilisant le SVG comme masque;

Afficher l'extrait de code

Bordure en pointillés SVG avec espace uniforme

Temani Afif
la source
1
Bien que ce soient des façons intéressantes de le faire qui semblent bonnes dans Chrome, seule votre première version de base de SVG fonctionne dans Firefox. Notamment, Firefox (même la version Nightly) ne prend pas en charge conic-gradient()ou repeating-conic-gradient(). Donc, cela pourrait être une approche viable à l'avenir, mais ce n'est pas quelque chose qui peut être utilisé pour le moment, si une fonctionnalité multi-navigateur est souhaitée.
Makyen
1
Étant donné que le code de la question OP fonctionne correctement dans Firefox (c'est-à-dire que leur problème déclaré n'existe pas dans Firefox), mais existe dans Chrome, ce serait probablement une bonne idée d'explorer les différences entre au moins Chrome (+ clones) et Firefox, tout en fournissant du code qui est fonctionnel dans les deux (ou du moins explicite ce qui peut être utilisé maintenant et qui prend en charge plusieurs navigateurs).
Makyen
@Makyen alors que le code OP fonctionne bien dans Firefox, j'essaie de me concentrer sur le contrôle de la partie de l'écart, car avec une bordure de base, nous ne pouvons pas contrôler les écarts. J'ajoute également la partie coloration. J'essaie d'en faire une réponse générique. Concernant le dégradé, oui Firefox manque de support mais je suis quasiment sûr que ça viendra bientôt (je suis quand même surpris qu'ils soient en retard à ça, Chrome le supportait depuis presque deux ans). J'ai lié à une autre question pour des moyens plus pris en charge, mais ce n'était pas très explicite. Le mettra à jour.
Temani Afif
3

Utiliser stroke-dasharrayavec SVG.

svg {
  width: 20vmax;
  height: 20vmax;
}
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke-dasharray="10, 4" fill="transparent" stroke="purple" stroke-width="5" />
</svg>
Développer l'extrait

Ou vous pouvez utiliser radial-gradient(), repeating-conic-gradient()fonctions sans Firefox.

.c {
  width: 20vmax;
  height: 20vmax;
  background-image: radial-gradient(#fff 68%, transparent 68% 70%, #fff 70%),
    repeating-conic-gradient(#000 0% 3%, transparent 3% 5%);
}
<div class="c"></div>
Développer l'extrait

sanriot
la source
3
conic-gradientdevient irrégulier pour une raison quelconque ...
sanriot