Как сейчас верстаются подобные элементы?

Question

[Alexander]

Всем привет.

На время "выпал" из жизни вёрстки. Сейчас для себя верстаю проект.

Подскажите, как нынче верстают подобные блоки?



Раньше верстали как-то так:

<div>
<span></span>
<span>Текст ссылки</span>
<span></span>
</div>

Сейчас же сверстал через один див и before+after.

А как сейчас верстают блоки где например есть 4 угла?



Весь вопрос в том чтоб не городить множество дивов в диве.

Answer 1

[Дима Паутов]

мультифон

.box {
background: 
  url('boxBg.png') center, 
  url('img1.png') top left no-repeat, 
  url('img2.png') top right no-repeat, 
  url('img3.png') bottom left no-repeat, 
  url('img4.png') bottom right no-repeat
;
}

Вот, уже 4 угла и фон есть)) и никакие псевдоэлементы с дивами не нужны

Comments

[Андрей]

а если контейнер будет тянуться по вертикали и горизонтали?

[Дима Паутов]

Андрей, ну и что? Фон же можно повторять)) Он по умолчанию повторяется. Вырезайте тянущиеся картинки так, что бы они могли повторяться, либо, вырезать картинку изначально максимально длинной, и просто центрировать + вы можете использовать border-image в некоторых случаях

Answer 2

[Андрей]

про 4 угла как-то так
css.yoksel.ru/assets/demo/border-image/demo_1.html