2
votes

Anneau CSS avec arrière-plan et largeur de bordure en pourcentage

Je cherche des conseils sur la création d'une forme "en anneau" en CSS. Voici quelques objectifs détaillés importants que je dois atteindre:

l'épaisseur de la bordure de l'anneau doit être un pourcentage, et non rm ou un nombre de pixels absolu, afin que la forme de l'anneau puisse être entièrement réactive en fonction de la taille du conteneur;
La bordure de l'anneau doit avoir un arrière-plan, pour mon scénario, l'arrière-plan peut parfois être une combinaison de 3-4 couleurs unies, ou une couleur dégradée;
Le remplissage de l'anneau doit être transparent pour que l'utilisateur puisse voir l'arrière-plan à travers.

Voici un exemple rapide:

Voici quelques tentatives que j'ai utilisées:

Créez un div border-radius: 50% avec seulement la largeur de la bordure, mais j'ai vite remarqué que la largeur de la bordure ne pouvait pas être un pourcentage;
SVG découpant un div rond en forme d'anneau. jusqu'à présent, je n'ai pas réussi à le faire fonctionner ... Si c'est la bonne approche, veuillez partager un extrait.

html css svg

2 commentaires

stackoverflow.com/questions/8193675/draw- un-cercle-creux-dans-svg

@kukkuz il a posé une question sur le CSS.

4 Réponses :

1
votes

Vous pouvez utiliser vw ou vh comme métrique. La border-width sera calculée en fonction de la largeur ou de la hauteur de la fenêtre en fonction de ce que vous choisissez. Vous devrez calculer la valeur que vous souhaitez utiliser:

.ring {
  border: 10vw solid red;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  width: 100%;
}

https://codepen.io/anon/pen/ErJbxN?editors=1100

Avec JS: https://codepen.io/anon/pen/rPbYvm

3 commentaires

Merci pour la réponse, l'approche vw vh ne répond pas à mes exigences spécifiques, penser à la forme consiste simplement à remplir le div parent, et le div parent peut avoir différentes tailles (grandes ou petites) sur le même port de vue.

@AllanJiang Je vois - JS / jQuery est-il une option pour vous alors?

position: absolue; n'est pas requis

1
votes

Créer des anneaux réactifs en CSS est difficile. Le mieux que j'ai trouvé est de simplement créer deux cercles empilés les uns sur les autres où l'arrière-plan du cercle supérieur est le même que l'arrière-plan du conteneur. Vous pouvez le faire avec 2x éléments comme dans mon exemple ou avec une pseudo-classe.

Avantages:

Vous avez beaucoup de contrôle
Ajoutez facilement d'autres contenus (comme des graphiques à secteurs) car le contenu est "masqué"

Cons :

L'arrière-plan doit être une couleur plate et rien ne s'affichera à travers l'anneau

<div class="outer">
  <div class="inner"></div>
</div>

.outer {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  background-color: #9273B0;
  margin: 10px;
  cursor:pointer;
}

.inner {
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease-out;
}

.outer:hover .inner {
  width: 90%;
  height: 90%;
}

Si vous DEVEZ voir l'arrière-plan à travers l'anneau, je regarderais le chemin d'un clip SVG, mais cela devient très vite compliqué.

0 commentaires

2
votes

Afin de maintenir les valeurs de pourcentage, vous pouvez essayer d'utiliser un gradient de radiel. Cependant, les frontières ont tendance à devenir un peu saccadées.

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  color: #fff;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background: radial-gradient(ellipse at     center, 
    rgba(255,113,12,0) 60%,
    rgba(255,113,12,1) 51.5%);
}

Exemple: https://codepen.io/SROwl/pen / BMEJzj

2 commentaires

C'est en fait assez brillant. En utilisant cette technique, vous pouvez simuler l'anticrénelage pour lisser ce bord: codepen.io/anon/pen/ vbqbbX

Merci @jerrylow, belle addition! J'ai remarqué après avoir posté que l'alias n'était vraiment pas trop mauvais sur des écrans de meilleure qualité. L'écran que j'ai utilisé pour les tests n'est pas le meilleur.

2
votes

Vous pouvez y parvenir en tenant compte du masque où l'idée est d'utiliser un gradient radial pour créer le trou et d'utiliser une valeur fixe qui rendra la partie visible (l'épaisseur) réactive.

<div class="container">
<div class="box">

</div>
</div>

.box {
  border-radius:50%;
  background:linear-gradient(red,purple,orange);
  -webkit-mask: radial-gradient(transparent 89px,#000 90px);
          mask: radial-gradient(transparent 89px,#000 90px);

}
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

.container {
  margin:0 auto;
  max-width:200px;
  animation:change 3s linear alternate infinite;
}

@keyframes change{
  to {
    max-width:400px;
  }
}

body {
 background:linear-gradient(to right,yellow,pink);
}

0 commentaires