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

139

16 января 2021, 14:40

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

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

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

Answer 1

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

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

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

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

<image xlink:href="https://i.stack.imgur.com/ij4A4.jpg" y="-70" width="100%" height="100%" opacity="0.45" />

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

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

 <pattern id="ptn1"
          x="-60"   
          width="220"
          height="250"
           patternUnits="userSpaceOnUse">
  <image width="220" 
         height="220" 
          preserveAspectRatio="none"
         xlink:href="https://i.stack.imgur.com/CD9UI.jpg"/>
 </pattern>

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

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

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
    <defs>
 
   <pattern id="ptn1"
           x="-60"   
           width="220"
           height="250"
            patternUnits="userSpaceOnUse">
   <image width="220" 
          height="220" 
           preserveAspectRatio="none"
          xlink:href="https://i.stack.imgur.com/CD9UI.jpg"/>
  </pattern>
</defs>
 <!-- Фоновое изображение -->
  <image xlink:href="https://i.stack.imgur.com/ij4A4.jpg" y="-70" width="100%" height="100%" opacity="0.5" />
   <!-- Центральный круг и линии выноски --> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#45228B"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
   <!-- Круглое изображение в центре-->
   
  <circle  stroke-width="3" fill="url(#ptn1)" stroke="white"  cx="488" cy="359.2" r="110" /> 
  
  
  <g fill="#45228B" font-weight="600">
   <text x="489" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="160" y="160" font-size="20" > Простая, </text> 
  <text x="160" y="185" font-size="20" > проверенная </text> 
   <text x="160" y="215" font-size="20" > бизнес модель </text>  
     <text x="690" y="478" font-size="20" > Бизнес - любимое дело </text>
  </g>
</svg>
</div>

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

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

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

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

<feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />

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

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
    <defs>
   <filter x="0" y="0" width="1" height="1" id="solid">
     <feFlood result="flood" flood-color="#9F46CB" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="lighten" />
  </filter>
    </filter> 
   <pattern id="ptn1"
           x="-60"   
           width="220"
           height="250"
            patternUnits="userSpaceOnUse">
   <image width="220" 
          height="220" 
           preserveAspectRatio="none"
          xlink:href="https://i.stack.imgur.com/CD9UI.jpg"/>
  </pattern>
</defs>
 <!-- Фоновое изображение -->
  <image xlink:href="https://i.stack.imgur.com/ij4A4.jpg" y="-70" width="100%" height="100%"  filter="url(#solid)" />
   <!-- Центральный круг и линии выноски --> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#D57700"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
   <!-- Круглое изображение в центре-->
   
  <circle  stroke-width="3" fill="url(#ptn1)" stroke="white"  cx="488" cy="359.2" r="110" /> 
  
  
  <g fill="#D57700" font-weight="600">
   <text x="489" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="160" y="160" font-size="20" > Простая, </text> 
  <text x="160" y="185" font-size="20" > проверенная </text> 
   <text x="160" y="215" font-size="20" > бизнес модель </text>  
     <text x="690" y="478" font-size="20" > Бизнес - любимое дело </text>
  </g>
</svg>
</div>

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

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

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

<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">
    <defs>
   <filter x="0" y="0" width="1" height="1" id="solid">
     <feFlood result="flood" flood-color="#9F46CB" />
    <feComposite in="flood" in2="SourceAlpha" operator="atop" result="maskedflood"/>
    <feBlend in="SourceGraphic" in2="maskedflood" mode="darken" />
  </filter>
    </filter> 
   <pattern id="ptn1"
           x="-60"   
           width="220"
           height="250"
            patternUnits="userSpaceOnUse">
   <image width="220" 
          height="220" 
           preserveAspectRatio="none"
          xlink:href="https://i.stack.imgur.com/CD9UI.jpg"/>
  </pattern>
</defs>
 <!-- Фоновое изображение -->
  <image xlink:href="https://i.stack.imgur.com/ij4A4.jpg" y="-7" width="100%" height="100%"  filter="url(#solid)" />
   <!-- Центральный круг и линии выноски --> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#E1E1E1"/>
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" />
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" />
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" />
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" />
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" />
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
   <!-- Круглое изображение в центре-->
   
  <circle  stroke-width="3" fill="url(#ptn1)"   cx="488" cy="359.2" r="110" /> 
  
  
  <g fill="#E1E1E1" font-weight="600">
   <text x="489" y="42" font-size="20" > Быстрый старт </text> 
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text> 
     <text x="700" y="220" font-size="20" >  входа в бизнес </text> 
      <text x="360" y="600" font-size="20" > Система обучения </text> 
     <text x="360" y="625" font-size="20" > вашего персонала и </text> 
    <text x="360" y="650" font-size="20" > помощь в его подборе </text> 
   <text x="160" y="160" font-size="20" > Простая, </text> 
  <text x="160" y="185" font-size="20" > проверенная </text> 
   <text x="160" y="215" font-size="20" > бизнес модель </text>  
     <text x="690" y="478" font-size="20" > Бизнес - любимое дело </text>
  </g>
</svg>
</div>

Answer 2

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

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

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" 
       width="962" height="732" viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet">   
 
<image xlink:href="https://i.stack.imgur.com/zdPiI.jpg" width="100%" height="100%" /> 
</svg>

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

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

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

<mask id="msk1"> <rect fill="#978300" width="100%" height="100%"/> <circle fill="white" cx="488" cy="359.2" r="110" /> </mask>

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

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

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

<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet"> 
	<defs> 
  <mask id="msk1"> 
   <rect fill="#BBA200" width="100%" height="100%"/> 
     <circle fill="white" stroke-width="3" stroke="red"  cx="488" cy="359.2" r="110" />  
  </mask> 
</defs> 
 
  <image xlink:href="https://i.stack.imgur.com/zPxW2.jpg" width="100%" height="100%" mask="url(#msk1)" /> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#45228B"/> 
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" /> 
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" /> 
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" /> 
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" /> 
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" /> 
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
  <g fill="#45228B"> 
   <text x="493" y="42" font-size="20" > Быстрый старт </text>  
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text>  
     <text x="700" y="220" font-size="20" >  входа в бизнес </text>  
      <text x="360" y="600" font-size="20" > Система обучения </text>  
     <text x="360" y="625" font-size="20" > вашего персонала и </text>  
    <text x="360" y="650" font-size="20" > помощь в его подборе </text>  
   <text x="120" y="160" font-size="20" > Простая, </text>  
  <text x="120" y="185" font-size="20" > проверенная </text>  
   <text x="120" y="215" font-size="20" > бизнес модель </text>  
  </g> 
</svg> 
</div>

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

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

<div class="container"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 962 732" preserveAspectRatio="xMinYMin meet"> 
	<defs> 
  <mask id="msk1"> 
   <rect fill="#BBA200" width="100%" height="100%"/> 
     <circle fill="white" stroke-width="3" stroke="red"  cx="488" cy="359.2" r="110" />  
  </mask> 
</defs> 
 
  <image xlink:href="https://i.stack.imgur.com/fRfB4.jpg" width="100%" height="100%" mask="url(#msk1)" /> 
  <circle cx="488" cy="359.2" r="120"  style="fill:none;stroke-width:2;stroke:#45228B"/> 
  <path d="m591.3 297.2 96.5-67.4h162.3M386.5 296.7l-93.2-67.4" class="s0" /> 
  <path d="m386.5 296.7-93.2-67.4h-186.4 1.1" class="s0" /> 
  <path d="m589.3 420.6 95.4 67.4h164.5" class="s0" /> 
  <path d="m387.2 425.2-95.4 67.4h-188.6" class="s0" /> 
  <path d="m541.5 251.6 143.7-202.9-202.9 2.2" class="s0" /> 
  <path d="m426.9 461.8-131.6 206.2c0 0 432.4-5 289.7-1.1" class="s0" /> 
   
  <g fill="#45228B"> 
   <text x="493" y="42" font-size="20" > Быстрый старт </text>  
    <text x="700" y="200" font-size="20" > Низкая стоимость  </text>  
     <text x="700" y="220" font-size="20" >  входа в бизнес </text>  
      <text x="360" y="600" font-size="20" > Система обучения </text>  
     <text x="360" y="625" font-size="20" > вашего персонала и </text>  
    <text x="360" y="650" font-size="20" > помощь в его подборе </text>  
   <text x="120" y="160" font-size="20" > Простая, </text>  
  <text x="120" y="185" font-size="20" > проверенная </text>  
   <text x="120" y="215" font-size="20" > бизнес модель </text>  
  </g> 
</svg> 
</div>

Answer 3

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

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

<svg viewbox="-100 -100 200 200" preserveAspectRatio="xMinYMin meet"> 
 
  <defs> 
    <pattern id="image" height="1" width="1"> 
      <image xlink:href="https://i.stack.imgur.com/3q67w.gif" 
             height="70px" width="70px" ></image> 
    </pattern> 
  </defs> 
 
  <image xlink:href="https://i.stack.imgur.com/3q67w.gif" opacity="0.3"  
         x="-100" y="-100" height="200" width="200" transform="scale(-1,1)"></image> 
   
  <g stroke="black" fill="none"> 
    <polyline points=" 20  90 -40  90 0 0"></polyline> 
    <polyline points="-20 -90  40 -90 0 0"></polyline> 
    <polyline points="-90 -50 -50 -50 0 0"></polyline> 
    <polyline points="-90  50 -50  50 0 0"></polyline> 
    <polyline points=" 90  50  50  50 0 0"></polyline> 
    <polyline points=" 90 -50  50 -50 0 0"></polyline> 
  </g>   
 
  <circle r="35" stroke="black" fill="url(#image)"></circle> 
   
  <text x="-20" y="88">hello</text> 
  <text y="-78">     
    <tspan x="-20" >row 1</tspan> 
    <tspan x="-20" dy="20px">row 2</tspan> 
  </text> 
</svg>

Answer 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: ""; 
}

<div class="title">lorem ipsum</div>

Answer 5

Вариант на CSS (смотреть на весь экран).

body {
  margin: 0;
}
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  color: #fff;
}

.section::before,
.section::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.section::before {
  background: url('https://i.imgur.com/a0ZySrQ.png') no-repeat center center / cover;
  filter: grayscale(100%) contrast(200%);
}
.section::after {
  background: rgba(92,0,155,.65);
}
.circle {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.circle::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: url('https://i.imgur.com/a0ZySrQ.png') no-repeat center center / cover;
}
.circle .item {
  display: block;
  width: 170px;
  position: absolute;
  transform: translate(-50%, -50%);
}
.circle .item .title {
  font-weight: bold;
  border-bottom: 1px solid #fff;
  padding-bottom: 3px;
  margin-bottom: 3px;
  position: relative;
}
.circle .item .title::after {
  content: '';
  display: block;
  height: 1px;
  background: #fff;
  position: absolute;
}
.circle .item:nth-child(1) {
  top: calc(50% - 200px);
  left: 50%;
}
.circle .item:nth-child(1) .title::after {
  width: 133px;
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: rotate(-60deg);
}
.circle .item:nth-child(2) {
  top: calc(50% - 100px);
  left: calc(50% + 250px);
}
.circle .item:nth-child(2) .title::after {
  width: 96px;
  top: 100%;
  left: 0;
  transform-origin: left center;
  transform: rotate(150deg);
}
.circle .item:nth-child(3) {
  top: calc(50% + 100px);
  left: calc(50% + 250px);
}
.circle .item:nth-child(3) .title::after {
  width: 84px;
  top: 100%;
  left: 0;
  transform-origin: left center;
  transform: rotate(-150deg);
}
.circle .item:nth-child(4) {
  width: 200px;
  top: calc(50% + 200px);
  left: 50%;
}
.circle .item:nth-child(4) .title {
  padding-left: 30px;
}
.circle .item:nth-child(4) .title::after {
  width: 149px;
  top: 100%;
  left: 0;
  transform-origin: left center;
  transform: rotate(-65deg);
}
.circle .item:nth-child(5) {
  top: calc(50% + 100px);
  left: calc(50% - 250px);
}
.circle .item:nth-child(5) .title::after {
  width: 86px;
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: rotate(145deg);
}
.circle .item:nth-child(6) {
  top: calc(50% - 100px);
  left: calc(50% - 250px);
}
.circle .item:nth-child(6) .title::after {
  width: 104px;
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: rotate(-145deg);
}

.circle .item .msg {
  font-size: 80%;
}

<div class="section">
  <div class="circle">
    <div class="item">
      <div class="title">Быстрый старт</div>
      <div class="msg">При четком следовании инструкциям вы откроете центр через 1,5 месяца.</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Низкая стоимость входа в бизнес</div>
      <div class="msg">Для открытия одного центра вам понадобиться всего от 870 000 руб (включая все расходы)</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Бизнес - любимое дело</div>
      <div class="msg">Это бизнес станет любимым как только вы увидите эмоции ваших маленьких клиентов и их родителей</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Система обучения вашего персонала и помощь в его подборе</div>
      <div class="msg"></div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Маркетинговая поддержка</div>
      <div class="msg">Все макеты рекламных материалов, размещение на федеральном сайте, в соц. сетях и четкие рекомендации по поиску клиентов.</div>
    </div>
      <!---->
    <div class="item">
      <div class="title">Простая проверенная бизнес-модель</div>
      <div class="msg">Мы даём вам четкий алгоритм по открытию центра и стратегию продвижению, которые проверены в реальной жизни.</div>
    </div>
  </div>
</div>