Как сделать дуги с помощью CSS3?

Я пытаюсь добиться следующего вида с чистым css:

введите здесь описание изображения

Где каждая белая дуга — это отдельный элемент, скажем, span. Я знаю, что мы можем делать круглые формы с помощью CSS, но как превратить их в дуги?


html css css-shapes
person Ilja    schedule 09.05.2013    source источник
comment
Вот JFiddle, который может представлять интерес: jsfiddle.net/tupCW   -  person Adam Brown    schedule 10.05.2013
comment
stackoverflow.com/a/4699096/684932 ( jsfiddle.net/yijiang/nDxYJ )   -  person RaphaelDDL    schedule 10.05.2013
comment
Это все неправильно. Для этого вы должны использовать SVG или Canvas.   -  person Mircea    schedule 14.11.2014
comment
@Mircea Я думал час или два и вообще не думал о SVG. Спасибо за идею :)   -  person Shamshirsaz.Navid    schedule 01.11.2020

Ответы (2)


arrow_upward
63
arrow_downward

Со следующим HTML:

<div id="arcs">
    <div>
        <div>
            <div>
                <div></div>
            </div>
        </div>
    </div>
</div>

И CSS:

#arcs div {
    border: 2px solid #000; /* the 'strokes' of the arc */
    display: inline-block;
    min-width: 4em; /* the width of the innermost element */
    min-height: 4em; /* the height of the innermost element */
    padding: 0.5em; /* the spacing between each arc */
    border-radius: 50%; /* for making the elements 'round' */
    border-top-color: transparent; /* hiding the top border */
    border-bottom-color: transparent;
}


#arcs div {
  border: 2px solid #000;
  /* the 'strokes' of the arc */
  display: inline-block;
  min-width: 4em;
  /* the width of the innermost element */
  min-height: 4em;
  /* the height of the innermost element */
  padding: 0.5em;
  /* the spacing between each arc */
  border-radius: 50%;
  /* for making the elements 'round' */
  border-top-color: transparent;
  /* hiding the top border */
  border-bottom-color: transparent;
}
<div id="arcs">
  <div>
    <div>
      <div>
        <div></div>
      </div>
    </div>
  </div>
</div>

демонстрация JS Fiddle.

person David says reinstate Monica    schedule 09.05.2013
comment
О, большое спасибо; и я рад, что был полезен! знак равно - person David says reinstate Monica; 10.05.2013
comment
@DavidThomas, ты проделал красивый и креативный трюк, я чувствую это ;) - person Hashem Qolami; 10.05.2013
comment
@RaphaelDDL: спасибо! После того, как я увидел ваше редактирование, я понял, что забыл добавить свою демонстрацию в ответ (несмотря на то, что использовал ее для проверки кода, который я разместил в своем ответе ... д'о!), отредактировал, чтобы добавить свой собственный в ( наконец-то..!) - person David says reinstate Monica; 10.05.2013
comment
@DavidThomas Еще один вопрос, я пытался добиться этого с помощью отступов, но это все портит. Есть ли шанс увеличить пространство посередине? (то есть между левой группой дуг и правой группой?) Я думаю, установка границы, прозрачной слева и справа, будет работать, но для этого потребуется больше элементов - person Ilja; 10.05.2013
comment
Что ж, я установил это пространство с помощью свойства min-width (как указано в комментариях к коду), попробуйте изменить его на расстояние/единицу, которая вам подходит? - person David says reinstate Monica; 10.05.2013
comment
+1 Вот версия демонстрации с фоновыми цветами, чтобы сделать происходящее более очевидным. И в качестве любопытства, вот другая демонстрация, показывающая, как достигается совсем другой эффект при определении border-left и border-right вместо определения border и создания верхней и нижней границ transparent. - person Matt Coughlin; 10.05.2013
comment
Нп. Всегда хорошо иметь демонстрацию :) @Matt Я пытался сделать этот код и закончил тем другим эффектом, который вы показали, с этой странной градиентной закругленной рамкой - person RaphaelDDL; 10.05.2013
comment
@DavidThomas И просто чтобы показать вам, как применялся этот замечательный трюк, посмотрите это! musicglaze.com надеюсь, вам понравится ;))) нажмите кнопку воспроизведения на любом из плееров. - person Ilja; 10.05.2013
comment
@DavidsaysreinstateMonica Можете ли вы взглянуть на мой вопрос: stackoverflow.com/questions/68222869 я пытаюсь сделать ту же форму, но в 3D - person Said Erraoudy; 05.07.2021

arrow_upward
8
arrow_downward

SVG-подход:

Я бы рекомендовал вам использовать SVG для рисования таких фигур:

В приведенном ниже примере я использовал элемент SVG path для рисования дуги. Этот элемент принимает единственный атрибут d для описания структуры фигуры. d атрибуты принимают несколько команд и соответствующие необходимые параметры.

Я использовал только 2 команды пути:

  • Команда M используется для перемещения пера в определенную точку. Эта команда принимает 2 параметра x и y и обычно наш путь начинается с этой команды. Это в основном определяет начальную точку нашего рисунка.
  • A команда, которая используется для рисования кривых и дуг. Эта команда принимает 7 параметров для рисования дуги/кривой. Подробное объяснение этой команды находится здесь.

Скриншот:

Изображение с дугами

Полезные ресурсы:

Рабочий пример:

svg {
  width: 33%;
  height: auto;
}
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <g id="arcs" fill="none" stroke="#fcfcfc">
      <path d="M80,80 A100,100,0, 0,0 80,220" stroke-width="4" />
      <path d="M90,90 A85,85,0, 0,0 90,210" stroke-width="3.5" />
      <path d="M100,100 A70,70,0, 0,0 100,200" stroke-width="3" />
      <path d="M110,110 A55,55,0, 0,0 110,190" stroke-width="2.5" />
    </g>
  </defs>
  
  <rect x="0" y="0" width="300" height="300" fill="#373737" />

  <use xlink:href="#arcs" />
  <use xlink:href="#arcs" transform="translate(300,300) rotate(180)" />
  
</svg>

person Mohammad Usman    schedule 24.02.2017