Как сверстать блок такой формы кроссбраузерно?

Question

[Fairtex]

Доброго времени суток!
Текстовый блок имеет вот такую форму:



Как сверстать его кроссбраузерно?

Comments

[Moon Presence]

SVG самое лучшее решение.

[Рустам Байназаров]

Картинка на фон.

[Fairtex]

Moon Presence, Можно насчет SVG поподробнее?

[Рустам Байназаров]

Fairtex, он про картинку на фон либо отдельным элементом на абсолютном позиционировании.

[Fairtex]

Рустам Байназаров, а, ок! Спасибо большое!

[Moon Presence]

Fairtex, картинка как фон, как и сказал Рустам Байназаров, или SVG и внутри него текст. Но картинкой будет лучше.

[Fairtex]

Moon Presence, Спасибо :)

Answer 1

[Moon Presence]

Возможно уголки не совсем ровно нарисовал, потому что сижу с телефона, но вроде бы получилось нормально)

Вот готовая SVG, копия той картинки которую вы привели в вопросе.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 813 815">
  <path fill="#F69B13" d="M22 274.5L35 307 6 332.5 22 374 0 406.5 22 441 6 482l29 25.5V550l25.5 19.5v46L91 628l6 43.5 35.5 8.5 11 37.5 38.5 5 22 38 37.5-1.5 26 30.5L305 782l37.5 25.5 34-13L407 815l36.5-20.5 41 13L509 782l36.5 7.5L572 759l36.5 1.5 24.5-38 39-5 7-37.5 38-8.5 4.5-43.5 36.5-21v-37.5l29-19.5-8.5-42.5 28-25.5-13-41 19-32-19-35 13-41.5-28-25.5 8.5-39-29-18v-42.5l-36.5-22L717 148l-38-11-13.5-37.5L627 91l-18.5-34H566l-20.5-31.5-46 10.5L476 10.5l-38.5 15L407 0l-39 25.5-31.5-15L305 36l-37.5-10.5-26 38.5-37.5-7-22 42.5h-38.5l-11 37.5L97 148l-6 42.5-36.5 17V250L22 274.5z"/>
</svg>

А в моей демке используется другой формат, специально для бекграундов через CSS. Проще говоря закодированная версия.

Намного лучше чем использовать PNG)))

Comments

[Fairtex]

Спасибо большое! Решение - супер!

[Moon Presence]

Fairtex, рад что понравилось)) удачи!