Как создать шестиугольный блок с бордерами средствами css?

Question

[Кейси]

Нужно сверстать вот такие вот шестиугольные блоки, у которых бордеры с некоторой стороны будут одного цвета и ширины, с другой стороны другого цвета и ширины. Это вообще реально создать средствами css? И какой вариант будет наиболее оптимальным?

Answer 1

[zooks]

Средствами CSS: https://css-tricks.com/examples/ShapesOfCSS/
Лично я бы делал через SVG.

Comments

[Кейси]

Да, саму форму можно сделать так. Но в таком случае нельзя сделать бордеры, как на картинке (два серых и 4 красных). В этом и вся сложность для меня (не самого опытного верстальщика)

[Сергей Протько]

Эд Неизвестна: SVG придет на помощь