Как сверстать блок с линиями отходящими от центральной картинки?

#html #css #вёрстка #svg #адаптивная_верстка

Возможно, кто-то сталкивался с подобными блоками?



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

UPD1: Сложность заключается в верстке линий, отходящих от центральной картинки, в
верстке блоков текста ничего сложного для меня нет.
    

Ответы

Ответ 1

Вариант с применением двух изображений

При этом решение используется pattern для добавления второго круглого изображения
в центре. 

Решение адаптивно, вёрстка не сломается при изменении размера окна браузера и при
просмотре на любом гаджете.


Фоновое изображение добавляется с помощью команды:  

 


Затемняется командой - opacity="0.45"
Позиционируется координатами - x и y
Изображение полностью заполняет родительский блок 
 и может
быть вставлено, как самостоятельный элемент в любое место веб страницы. 


Круглое изображение добавляется поверх фонового изображения с помощью
     


 
  
 


Ниже полный код приложения:  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}







Вариант с применением фильтров

Если выбранное изображение устраивает вас по содержанию, но в связи с требованиями
дизайна нужно сменить цвет оттенка фона или цвет фигур, то совсем не обязательно дорабатывать
картинку в фотошопе, можно её перекрасить с помощью комбинации фильтров: feflood, feComposite,
feBlend
Техника применения этих фильтров подробно объясняется в топике на нашем сайте 

#1 Вариант с покраской фигур  

В фильтре  применяется оператор mode="lighten"  

  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#D57700;
}







#2 Вариант с покраской фона  

В фильтре  применяется оператор mode="darken"  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#E1E1E1;
}





Ответ 2

Надеюсь работники офисов не будут на меня в обиде за беззлобную
  шутку-картинку, демонстрирующую их тяжкий повседневный труд. Это скорее сочувствие.
  Может быть вы улыбнетесь, глядя на эту картинку и вам станет легче переносить самодура-начальника
 в повседневности.


Чтобы получить адаптивное приложение, которое будет работать во всех современных
браузерах, необходимо выполнить следующие шаги: 


Загружаем выбранную картинку в векторный редактор и устанавливаем
размеры svg полотна равные ширине и высоте растрового изображения 










В векторном редакторе с помощью инструмента - Рисовать кривые Безье
добавляем нужные контуры линий для размещения поясняющего текста   


   


Сохраняем файл в формате SVG и прогоняем его через оптимизатор
для получения чистого кода без лишнего кода от Inkscape
Чтобы получить центральную, круглую часть изображения более светлую
по сравнению с остальным фоном изображения, применяем комбинированную
маску, где центральный круг имеет атрибут fill="white", что делает
его полностью прозрачным. 

rect имеет более темную закраску fill="#978300", поэтому   фон будет затемненным.  



   
      
  


Добавляем текст


Ниже полный код:  



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}







Та же техника реализации с другой картинкой: 



.container {
 width:100%;
 height:100%;
 }
 .s0{
	fill:none;
	stroke-width:2;
	stroke:#45228B;
}





Ответ 3

Вот SVG вариант.

Я умышленно ставлю вьюбокс наполовину в отрицательную область (viewbox="-100 -100
200 200"), чтобы координата 0,0 была в центре картинки, так легче из головы брать точки
для полилиний без дополнительной арифметики.






Ответ 4

Вариант с помощью псевдоэлемента и CSS. Вместо after можно использовать SVG элемент.



.title {
  position: relative;
  width: 300px;
  border-bottom: 1.5px solid black;
  padding: 5px 10px;
}
.title::after {
  position: absolute;
  right: 16px;
  bottom: -69px;
  width: 100%;
  height: 1.5px;
  background-color: black;
  transform: translateX(100%) rotate(25deg);
  content: "";
}
lorem ipsum