Как сделать дугу на css или svg?

@magdalen_kub 

Для создания дуги можно использовать как CSS, так и SVG.

Вот примеры обоих способов:

CSS:

Для создания дуги в CSS используйте свойство border-radius. Чтобы сделать дугу, установите значения 50% / 50% для border-radius и установите ширину и высоту элемента, чтобы он имел форму круга. Затем используйте свойство transform: rotate() для поворота дуги.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div class="arc"></div>

<style>
  .arc {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    border-radius: 50% / 50%;
    transform: rotate(-45deg);
    border-right: none;
    border-top: none;
  }
</style>

SVG:

Для создания дуги в SVG используйте элемент <path> с атрибутом d, который задает путь фигуры. Для создания дуги установите значение A в команде d, чтобы создать дугу с заданными радиусом, координатами начальной и конечной точек, а также ориентацией дуги.

1
2
3

<svg width="200" height="200">
  <path d="M100,100 A50,50 0 0,1 150,150" fill="none" stroke="black" stroke-width="2" />
</svg>

Здесь M100,100 - это начальная точка, A50,50 0 0,1 150,150 - это ко***** A, которая создает дугу с радиусом 50, начинающуюся от точки (100,100) и заканчивающуюся в точке (150,150).

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

@magdalen_kub 

• если вам нужно создать дугу с нужной длиной или углом, вы можете использовать формулы для вычисления нужных координат точек начала и конца дуги в SVG или вычислить значения для border-radius в CSS.