Каким образом корректней будет сверстать следующий элемент:

Question

Смог сверстать похожий механизм с помощью псевдоэлемента :before. Изначально создал div, задал ему border, и сделал круг с помощью border-radius. Так как при этом, order беспрерывный, то создавать разрывы решил с помощью :before. Я создал его в виде прямоугольника с цветом фонового окна, и растянул по всей ширине div, до момента, пока он не перекрыл собой border. Не уверен что это правильный подход, так как при смене фона на, допустим, градиент или картинку, :before не подстроится под цвет фона, либо исчезнет совсем, снова делая border сплошным. Помогите пожалуйста.

body
{
  background-color: white;
}

.test
{
  width: 76.92%;
  height: 76.92%;
  position: absolute;
  background-color: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(227, 33, 64);
  border-radius: 50%;
  animation: rot 6s linear infinite;
}

.test:before
{
  content: '';
  display: block;
  width: 112%;
  height: 30%;
  background-color: inherit;
  position: absolute;
  top: 50%;
  left: -6%;
  transform: translateY(-50%);
}

.test:after
{
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background: rgb(227, 33, 64);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.outer
{
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid rgb(227, 33, 64);
  border-radius: 50%;
  animation: rot 15s linear infinite;
}

.outer:before
{
  content: '';
  display: block;
  background-color: inherit;
  width: 107.5%;
  height: 23.08%;
  position: absolute;
  top: 50%;
  left: -3.8%;
  transform: translateY(-50%);
}

.anim
{
    position: absolute;
    display: flex;
    justify-content: space-around;
    width: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: inherit;
    list-style-type: none;
}

.anim li
{
    position: relative;
    width: 130px;
    height: 130px;
    background-color: inherit;
}

@keyframes rot
{
  from
  {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  
  to
  {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

<ul class="anim">
            <li>
                <div class="outer"></div>
                <div class="test"></div>
            </li>
</ul>

Answer 1

Хорошо изучите и используйте CSS-градиенты (linear, radial, conic) - это откроет очень много возможностей для реализации задуманного, а также сэкономит время.

Простейший вариант (добавил фоновую картинку и сделал несколько сегментов полупрозрачными, чтобы показать, что всё настраивается):

body {
  background-color: white; background-image: url("https://i.stack.imgur.com/m9NKc.png"); display: flex; justify-content: space-around; align-items: center; height: 100vh; margin: 0; }

.loader {
  height: 130px; width: 130px;
  overflow: hidden;
  background-image: radial-gradient( circle, rgb(227, 33, 64) 25px, rgba(227, 33, 64, 0) 26px);
  filter: drop-shadow(0 6px 3px rgba(0,0,0,0.75));
}

.c1, .c2 {
  position: relative;
  height: 130px; width: 130px;
  animation: rot 8s linear infinite;
}

.c1::before, .c1::after, .c2::before, .c2::after {
  content: "";
  position: absolute;
  left: 0;
  height: 50px; width: inherit;
}

.c1::before {
  top: 0;
  background-image: radial-gradient( circle at 50% 65px, rgba(227, 33, 64, 0) 58px, rgba(227, 33, 64, 1) 59px, rgba(227, 33, 64, 1) 64px, rgba(227, 33, 64, 0) 65px);
}
.c1::after {
  bottom: 0;
  background-image: radial-gradient( circle at 50% -16px, rgba(227, 33, 64, 0) 58px, rgba(227, 33, 64, .6) 59px, rgba(227, 33, 64, .6) 64px, rgba(227, 33, 64, 0) 65px);
}

.c2::before {
  top: 0;
  background-image: radial-gradient( circle at 50% 65px, rgba(227, 33, 64, 0) 44px, rgba(227, 33, 64, .6) 45px, rgba(227, 33, 64, .6) 51px, rgba(227, 33, 64, 0) 52px);
}
.c2::after {
  bottom: 0;
  background-image: radial-gradient( circle at 50% -16px, rgba(227, 33, 64, 0) 44px, rgba(227, 33, 64, 1) 45px, rgba(227, 33, 64, 1) 51px, rgba(227, 33, 64, 0) 52px);
}

@keyframes rot {
  to { transform: rotate(1turn); }
}

<div class="loader">
  <div class="c1">
    <div class="c2"></div>
  </div>
</div>

БЛОГ НА HUSL

Каким образом корректней будет сверстать следующий элемент:

Ответы (1 шт):