CSS кольцо с фоном и шириной в процентах

Question

Я ищу несколько советов по созданию "кольцевой" формы в CSS.Вот некоторые важные подробные цели, которые мне нужно достичь:

1. толщина границы кольца должна быть процентным числом, а не rm или абсолютным числом пикселей, чтобы форма кольца могла полностью реагировать на основеразмер контейнера;

2. На кольцевой границе должен быть фон, для моего сценария фон может иногда представлять собой комбинацию из 3-4 сплошных цветов или цвета градиента;

3. Заполнение кольца должно быть прозрачным, чтобы пользователь мог видеть фон сквозь него.

Вот краткий пример:

Вот несколько попыток, которые я использовал:

1. Создайте border-radius: 50% делитель только с шириной границы, но вскоре я заметил, что ширина границы не может быть процентным числом;

2. SVG, обрезающий круглый div до формы кольца.до сих пор я не смог успешно заставить его работать ... Если это правильный подход, пожалуйста, поделитесь фрагментом.

Answer 1

Этого можно добиться, учитывая mask-image, где идея состоит в том, чтобы использовать radial-gradient для создания отверстия и использовать фиксированное значение, которое сделает видимую часть (толщину) отзывчивой.

.box {
  border-radius:50%;
  background:linear-gradient(red,purple,orange);
  -webkit-mask-image: radial-gradient(transparent 89px,#000 90px);
  mask-image: 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);
}

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

</div>
</div>

Answer 2

Создание адаптивных колец в CSS очень сложно.Лучшее, что я нашел, - это просто создать два круга, наложенных друг на друга, где фон верхнего круга совпадает с фоном контейнера.Вы можете сделать это с 2x элементами, как в моем примере, или с псевдоклассом.

Плюсы:

• Вы получаете много контроля
• Легко добавьте другой контент(например, круговые диаграммы), поскольку содержимое «замаскировано»

Минусы:

• Фон должен быть ровного цвета, и через кольцо ничего не будет отображаться

.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%;
}

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

Если вы ДОЛЖНЫ видеть фон сквозь кольцо, я бы посмотрел путь SVG-клипа, но это довольно быстро усложняется.

Answer 3

Чтобы сохранить процентные значения, вы можете попробовать использовать радиальный градиент.Однако границы имеют тенденцию становиться немного изменчивыми.

.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%);
}

Пример: https://codepen.io/SROwl/pen/BMEJzj

Answer 4

Вы можете использовать vw или vh в качестве метрики.border-width будет рассчитываться на основе ширины или высоты области просмотра в зависимости от того, что вы выберете.Вам нужно будет немного подсчитать, какое значение вы хотите использовать:

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

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

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