@Fairtex

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

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

5e284f566a9dc351576661.png

Как сверстать его кроссбраузерно?
  • Вопрос задан
  • 317 просмотров
Решения вопроса 1
sniggering_deus
@sniggering_deus
Frontend Engineer & Fullstack Designer


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

Вот готовая 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)))
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы