Максим: линия бордером, точки - маркеры списка либо before, как рекомендуют выше, сдвиг этого списка так, чтобы маркры встали на линию. Сами точки либо картинки, либо радиальные градиенты, во втором случае использовать before.
Я написала, что клиент в контентное поле может ввести все, что угодно. И при этом нет гарантии, что он обернет это хоть в какой-то тег. Или пусть даже это будет нормальный тег, но им окажется img codepen.io/anon/pen/wdBYXB
Поэтому, Ваш вариант прекрасен и я полностью за него, вообще не люблю лишние теги и обертки, но он подходит только если есть полный контроль над окружающими тегами.
Эммм...
Берем блок квадратиком, делаем ему 4 разных бордера.
Дальше берем after, делаем его на всю ширину блока с бордерами, множественным фоном градиентами рисуем черный каркас.
1. На глаз с повернутыми блоками бывает тяжело.
Открываете инспектор, ставите курсор на значения свойств и стрелками вверх-вниз изменяте значения. Результат виден прямо на экране.Таким образом подгоняете, потом переносите в свой файл.
2. Блоки не пропадают. Они у вас белым по белому оказываются ниже фона картинки.
- line-height 680px в двух вложенных блоках это очень много.
Хороший способ понять где границы каких блоков это задать им фон или рамки (по ситуации). Рамки или border или outline.
box-sizing бывает удобно задать сразу всем элементам * {box-sizing: border-box}
3,4. И не поможет.
Во-первых, не стоит задавать ширину для body. Лучше основному контейнеру. Потом ему margin auto, чтобы встал по центру.
Во-вторых, если установлена ширина 1360 (не важно чему). 1360 - это весь монитор, если он 1360, а значит не учтена полоса прокрутки и рамки старых браузеров. На мониторах 1280 вы получите еще большую прокрутку. На больших - свободные поля.
Т.е. ширину можно задавать в процентах, 100% и при необходимости установить максимальную ширину.
Для мобильных устройств использовать media запросы и устанавливать соответствующий meta viewport
5. Да, меня он тоже этим бесит.
6. если ответ не нагуглился за полчаса-час, то можно и тут спрашивать. Главное, чтобы было понятно, что гуглить вы не поленились.
eashla: С точки зрения красоты - первый.
С точки зрения seo - я бы выбрала второй.
Либо обсудила бы с дизайнером другие идеи украшения заголовка.
Можно на js выяснить какую ширину занимает именно текст и потом подложить градиент нужного размера, если речь именно о цветной подложке. В html будет только h1 - красиво. Но целесообразность сомнительна.
