Как бы вы сверстали такие блоки?

Question

[Niksak]

Моя идея:
Для заголовка: черный элемент экспортировать как свг, вставить задним фоном, дальше на него уже h1 (а внутри теги span чтобы как нужно позиционировать каждое слово, сам блок заголовка с заданной шириной чтобы все ок отображалось)

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

Comments

[WbICHA]

Для заголовка: черный элемент экспортировать как свг

При малейшем изменении позиций тебе новый свг собирать, но зачем? У тебя 2 прямоугольника со скруглённым бордером + соединяющее закругление, которое к правой и левой границе "приклеиваются" соответственно (их можно и через свг, либо через бефор/афтер).

Для фичей: также черную шнягу экспорт и вставить задним фоном

Опять же, зачем? У тебя 3 чёрных квадрата + соединение между ними. Соединение вообще можно сделать квадратом и дать белым квадратом белый фон и закруглить углы. В первом случае тоже так можно, но там текст как-то криво расположен, а тут вообще всё просто.

Answer 1

[Виталий Першин]

Первое как вариант:

Уголки можно заменить svg или png картинками, чтобы стало более гладко

А на второе времени нет

Comments

[modelair]

в сафари плохо. юниты делятся с дробями, ему такое не нравится

[Виталий Першин]

modelair, в данном случае это не проблема, можно сделать наложение в 1px, либо использовать фиксированные значения. Поправил пример думаю должно помочь.

[modelair]

Виталий Першин, теперь огонь=)

[Виталий Першин]

modelair, :D

[Niksak]

Виталий Першин, а как можно было бы сделать чтобы эта черная деталь была сделана с помощью clip-path?

[Виталий Першин]

Niksak, не представляю

Answer 2

[YepBro]

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

Comments

[Ankhena]

Не надо двойных дивов, в CSS есть псевдоэлементы для таких украшений.

[modelair]

тут тоже самое

[YepBro]

Ankhena, я не настоящий верстальщик :)