Как сверстать шестиугольный тянущийся блок?

Тема в разделе "Верстка", создана пользователем d0ublezer0, 25 авг 2020.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    352
    Симпатии:
    175
    Клиенту надизайнили вот такой макет. Не понимаю, как верстать.

    Белую область еще примерно понимаю, как можно сделать из трёх частей. Верх и низ бордюрами по методам треугольника, центр - обычный прямоугольник. А вот золотую рамочку - как? И тянуться оно должно вертикально, завися от наполненности

    [​IMG]
    Ещё занятно то, что левый край фигуры выходит за сетку. Это видно по левой границе текста.

    https://codepen.io/d0ublezer0/pen/bGpqgKY

    вот что удалось сверстать

    что не нравится: придется ловить значения бордюра для разных разрешений, чтобы попасть в ширину блока

    ну и рамочку так и не смог запилить.

    UPD: добрался до clip-path

    Более-менее. но не уверен как с поддержкой браузерами. Может, есть бронебойное решение?

    https://codepen.io/d0ublezer0/pen/qBZrrEb

    С рамочкой пока бессилен.
     
    Последнее редактирование: 25 авг 2020
    Didi нравится это.
  2. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    97
    Симпатии:
    39
    Самый простой вариант - 4 png картинки, верх, низ, и боковые бордюры.
     
  3. Didi

    Didi Постоялец

    Регистр.:
    16 окт 2013
    Сообщения:
    77
    Симпатии:
    38
    Интересная затея))
    Я тоже сразу подумал квадрат в средине и 2 треугольника верх и низ. Вижу это уже сделано.
    Насчет рамки - я думаю надо 2 треугольника один в другом, в то время когда внешний будет прозрачным.
    Тоже и с квадратом (один в другом).

    Теперь проблема состыковки + респонсивность:
    Тут помоему нужно 3 дива (верх центр и низ) в корорых непосредственно будут наши 3 фигуры. Таким образом величина треугольников и квадрата будет вычесляться по отношению к этим контейнерам.
    Единственно не уверен или получится состыковать рамку квадрата с треугольниками автоматически. Если нет - то просто работаем с заранее намеченными величинами с помощью media queries.

    Не очень понял насчет "левый край фигуры выходит за сетку", покажите на скрине.

    В любом случае всю эту дребедень нужно вставить в один контейнер, а его уже можно двигать как хочешь: position: absolute/relative, отрицательный margin итд..
     
  4. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    352
    Симпатии:
    175
    Думал об этом. При масштабировании будет размазня на крупных разрешениях или неоправданно большой размер изображений. При этом пропорции масштабирования будут соблюдаться только линейно.

    Опять же, это не вычисления, а подбор величин под разные разрешения. Вот у меня на маке окно открыто всегда не в полный экран. Тут не угадать.

    Вот граница сетки:
    upload_2020-8-25_19-38-14.png

    Отзывчивость в таком случае невозможна. По крайней мере, пока решения не нашел.
     
  5. DJ PROMO

    DJ PROMO Постоялец

    Регистр.:
    9 июл 2017
    Сообщения:
    112
    Симпатии:
    42
    Ну вот так вот например: https://codepen.io/ignordollar/pen/JjXWZgm
    Добавить бордер слева и справа думаю проблем не составит. Тем более задать двойной бордер.)))
    Так же можно задать растягивание блока от зависимостей с помощью стандартных css свойств.
     
  6. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    352
    Симпатии:
    175
    Сделал.
    Обновил pen: https://codepen.io/d0ublezer0/pen/bGpqgKY

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

    Вопрос к знатокам: насколько примененное решение стабильно?
     
  7. Didi

    Didi Постоялец

    Регистр.:
    16 окт 2013
    Сообщения:
    77
    Симпатии:
    38
    Тема с SVG думаю даже получше варианта который я предлагал.
    Тут только для респонсивности нужно оба шесиугольника привязать к какойто стороне или зацентрировать, так как при изменении величины каждого они разбегаются.
    Думаю решение хорошее и стабильное, только все правильно разчитать для респонсивности.
     
  8. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    352
    Симпатии:
    175
    Менять надо размер ограничивающего блока .prehex, тогда ничего не разбегается.
     
    Didi нравится это.
  9. Matysh

    Matysh Создатель

    Регистр.:
    5 сен 2012
    Сообщения:
    12
    Симпатии:
    1
    https://codepen.io/thebabydino/pen/gFxzt
    Посмотрите на это, может чем поможет. Я использовал у себя, но вот можно ли зафигачить сюда рамку - не уверен. Хотя, если сделать два шестиугольника разных размеров, больший под меньшим...