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

Question

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

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

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

De.Minov · Answer

Вариант на 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%; }

Быстрый старт

При четком следовании инструкциям вы откроете центр через 1,5 месяца.

Низкая стоимость входа в бизнес

Для открытия одного центра вам понадобиться всего от 870 000 руб (включая все расходы)

Бизнес - любимое дело

Это бизнес станет любимым как только вы увидите эмоции ваших маленьких клиентов и их родителей

Система обучения вашего персонала и помощь в его подборе

Маркетинговая поддержка

Все макеты рекламных материалов, размещение на федеральном сайте, в соц. сетях и четкие рекомендации по поиску клиентов.

Простая проверенная бизнес-модель

Мы даём вам четкий алгоритм по открытию центра и стратегию продвижению, которые проверены в реальной жизни.

Alexandr_TT · Answer

Вариант с применением двух изображений При этом решение используется 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; }

Alexandr_TT · Answer

Надеюсь работники офисов не будут на меня в обиде за беззлобную шутку-картинку, демонстрирующую их тяжкий повседневный труд. Это скорее сочувствие. Может быть вы улыбнетесь, глядя на эту картинку и вам станет легче переносить самодура-начальника в повседневности. Чтобы получить адаптивное приложение, которое будет работать во всех современных браузерах, необходимо выполнить следующие шаги: Загружаем выбранную картинку в векторный редактор и устанавливаем размеры 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; }

Stranger in the Q · Answer

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

E_K · Answer

Вариант с помощью псевдоэлемента и 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>

lorem ipsum

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

5 Answers

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

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

Add your own answers!

Ask a Question