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

Как это работает

Кривые Безье средствами CSS не рисуются, поэтому остаётся искать более извращённые способы. Например, отрезать дугу от эллипса.

Эллипс довольно просто (но несколько неожиданно) получается с помощью относительных значений свойства border-radius: 50% (проценты как раз и превращают овал в правильный эллипс). Нужная часть вырезается с помощью внешней обёртки и overflow: hidden.

Чтобы вырезать дугу с загибом в нужную сторону, достаточно сместить эллипс внутри обёртки. Это удобно делать с помощью position: absolute и свойств left, right, top и bottom:

Абсолютное позиционирование даёт еще один плюс: резиновость. При ширине и высоте эллипса примерно вдвое больших, чем у обёртки, получается дуга в 90° при любом размере линии выноски:

Контейнер:

.line {
  position: relative; /* чтобы эллипс спозиционировать абсолютно */
  width: 25%; /* нам же интересна именно резина */
  height: 50px;
  overflow: hidden; /* отрезаем дугу */
}

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

.line:before {
  content: "";
  position: absolute; 
  width: 220%;
  height: 210%;
  right: 0; /* вырезаем правую верхнюю часть эллипса */
  top: 0;
  border: 1px solid #ccc; /* цвет и вид линии */
}

Стилизация

Так как это обычный border, то к нему применимы все соответсвующие стили:

Меняя размеры (width и height) и смещение (top, bottom, left и right) эллипса внутри обёртки, получаем дуги разной формы:

Деградация

В браузерах, не поддерживающих border-radius, метод также работает, просто в соответствии с принципами изящной деградации выглядит стрёмно: