Как сверстать шестиугольники вокруг цифр?

Question

[Korifa]

Как сверстать шестиугольники вокруг цифр ?

Answer 1

[Сергей delphinpro]

второй варик

Answer 2

[kiberlain]

6-угольную svg-шку бэкграундом вставить в прямоугольный блок - самое логичное решение

Answer 3

[Олег]

Можно и так

Comments

[Korifa]

круто, очень круто, но я только начал изучать html, css, а js как минимум еще несколько месяцев будет ждать своей очереди

Answer 4

[Петр]

Попадалась мне как то статья про фигуры в css.
Может найдете для себя решение. Там тоже есть шестиугольник.

Answer 5

[profesor08]

Хочешь на css, то создай 6 внутренних элементов нужной ширины и толщины, а потом transform: tanslate() rotate() расположи их.
Либо делай на svg.

Comments

[Ankhena]

Какие еще 6 элементов только ради декора...

[profesor08]

Ankhena, по одному на каждую грань. использовать три из-за специфики отрисовки бордера нельзя.

[Максим Тимофеев]

создай 6 внутренних элементов нужной ширины и толщины

а Вы, батенька, извращенец еще тот :)

[Сергей delphinpro]

profesor08, так-то достаточно трех, ведь противоположные грани равны и параллельны. Один может быть самим блоком, остальные два - псевдо-элементами.

[profesor08]

Сергей delphinpro, удачи в борьбе с угловатыми стыками, в итоге придешь к решению 1 грань = 1 блок.

Максим Тимофеев, необходимость, используя border получишь угловатые стыки.

[Максим Тимофеев]

profesor08, я к тому что svg как-то прямее способ

[Сергей delphinpro]

profesor08, ну вот так

[profesor08]

Сергей delphinpro, грани разной толщины.

Максим Тимофеев, об svg я писал же, но можно же и поизвращаться.