Как сделать дугу css

Для создания дуги в CSS можно использовать свойство border-radius в сочетании с прозрачным бордером.

Свойство border-radius создает скругления углов элемента, и если установить его радиус на очень большое значение, то углы будут становиться полукруглыми и со временем будут почти двигаться в середину, формируя дугу.

Например, чтобы создать дугу элемента:

.arc {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0 / 25px 25px 0 0;
  border: 10px solid transparent;
}

В данном примере ширина элемента равна 100 пикселей, высота элемента равна 50 пикселей. Значение свойства border-radius установлено таким образом, чтобы сформировать полукруглое начало дуги вверху и задать несколько более крутой радиус скругления внизу.

Значение 25px в border-radius означает радиус скругления для вертикального направления.

Свойство border устанавливает прозрачную границу, чтобы сохранить внутреннее содержимое элемента внутри дуги.

В результате получается дуга, которая легко адаптируется под любой размер и цвет.

Пример можно увидеть здесь: https://codepen.io/serg-p/pen/ZEYyOmz