emkorshunov

Адаптивная картинка и адаптивный фон разные вещи.
Если бы была картинка, я бы сказал, что стоит дать ей свойство max-width: 100%, но тут используется фон. Сразу и в лоб — блок, к котором применяется background-image должен иметь свойство background-size: contain. Вот только делать этого очень не советую, так как у блока появятся «уши». Это когда есть незанятое пространство. В данном случае пострадает текст в первую очередь, который «лежит» поверх фона.
Разумнее использовать background-size: cover. Тогда картинка будет подстраиваться под размер области, в которой она является фоном.

Классика же - поворачивать контейнер на 45% через transform, а содержимое поворачивать в обратную сторону на столько же.
https://codepen.io/alexey-m-ukolov/pen/PBdazG

Можно картинкой вставить. Просто. Быстро. Размер шрифта начинает отличаться от остальной страницы при адаптивном уменьшении картинки. Печаль для дизайнера-перфекциониста. А еще буквы могут начать мылиться. Это вообще печаль. Если нужно добавить/убрать стрелки - придется перерисовывать картинку. Это неприемлемо, если к ним привязана какая-то еще логика и они показываются не всегда.

Можно использовать связку SVG+CSS:
- Берется SVG с viewbox='0 0 100 100'.
- Основная картинка вставляется в виде image.
- Стрелки рисуем в векторе (это просто дуги из одной точки в другую с маркером на конце).
- Если нужно сделать их двухцветными, как в вашем примере - делаем маску по картинке и применяем ее к стрелкам.
- Надписи верстаем отдельно (div`ами) и абсолютно позиционируем сверху. Координаты будут соответствовать им же в svg (от 0 до 100). Это нужно для того, чтобы сохранять размер шрифта при адаптивном уменьшении всего этого.

Дальше при необходимости мы можем легко из css или js показывать или скрывать надписи и стрелки.

Вариант в лоб: https://codepen.io/anon/pen/VBdKZN

Круг в виде div, которому задано изображение в виде background-image.

Если никакого контента внутри не будет, а задача его исключительно графическая, то лучше сделать это псевдоэлементом.

Потому что их так позиционируют. Дистрибов много и надо хоть как-то выделяться, вот и начинается "очеловечивание" линуха, которое в итоге приводит к тому, что человек становится этаким "недо-линуксоидом", то есть человеком, который что-то способен сделать только через бубунтовский гуй, а когда он оказывается перед необходимостью работать с консолью, он чувствует себя ничуть не лучше, чем его собрат "недо-виндузятник", оказавшийся перед командной строкой.
На самом деле это все стереотипы. И бубунтой и минтом можно пользоваться ровно так, как хочется - если знаешь, что делать и как делать. И сервера на них держат и все такое. Это в конце концов тот же линух :)

О крутости шляпы.

Шляпа - корпоративный дистриб. И его основная цель - чтобы работало. И этой цели он достигает. CentOS, его коммунити-зеркало, взлетает быстро, работает хорошо, обновления на el6 до сих пор выпускаются, несмотря на ведро 2.6.32 :) Но - повторюсь - это корпоративный дистриб. То есть там нет новых программ. Там нет ничего про игры и мультимедию и вообще про развлечения ничего нет. Это суровый набор рабочих инструментов :) Для дома он не годится.

О "сверхкрутости" FreeBSD.

Как человек, проработавший на FreeBSD c 1997 по 2013 год - могу сказать совершенно точно - это все лажа. Да, FreeBSD - это совсем не линух. Да, там другое ведро, там другой сетевой стек, там другой файрволл, там другое все. Но "другое" не значит "лучшее". Потеря коммунити - это самая серьезная потеря, а коммунити FreeBSD если не сокращается, то по крайней мере не растет.

Почему?

Проблемы с железом, то есть с дровами
Проблемы с совместимостью, когда программы, работающие в линухе, скрипят и еле везут на FreeBSD
Проблемы с разработчиками - ведь код ведра, дрова, специфические вещи нужно же кому-то писать!
...
словом все то же самое, что убило когда-то одну из самых замечательных, красивых и весьма популярных ОС - OS/2...