Как сделать заголовок в диалоговом пузыре?
Ссылка скопирована
подскажите, пожалуйста, как такое делается? попробовала через псевдоэлемент и картинку контура, но выглядит плохоsnippet
Дополнительно:
у меня иначе отображается результат этого кода
но вопроса это не снимает
вот так должно быть
Просто фоном.
Пропорции svg сломать с помощью preserveAspectRatio="none"
Хвост я бы ставила отдельно, чтобы он не портил картину.
С другой стороны, если такая радость одна, то и без разницы если он изменит пропорции.
Возможно, пригодится ещё vector-effect="non-scaling-stroke", пробуйте.
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Артём Dev
Ответ
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
Pyrogram
Как правильно зарегистрировать юзер бота в Telegram?
0 ответов
печатные-платы
Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro?
0 ответов
VPN
Как правильно настроить vless для Android TV?
0 ответов
Visual Studio Code
Как лучше убрать тень у панели слева в VS Code?
0 ответов
Для создания заголовка в диалоговом пузыре можно использовать HTML и CSS. Вот пример кода на PHP, который демонстрирует это:
.dialog { position: relative; background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin: 10px; } .dialog::before { content: "Dialog Title"; position: absolute; top: -20px; left: 10px; background-color: #f1f1f1; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } <div class="dialog"> This is the content of the dialog. </div>.dialog { position: relative; background-color: #f1f1f1; border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin: 10px; } .dialog::before { content: "Dialog Title"; position: absolute; top: -20px; left: 10px; background-color: #f1f1f1; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } <div class="dialog"> This is the content of the dialog. </div>
В данном примере, мы создали стиль с именем ".dialog", который задает внешний вид диалогового пузыря. Затем, с помощью псевдоэлемента "::before", мы добавили заголовок к диалоговому пузырю. Заголовок имеет отступ сверху и слева, фоновый цвет, границу и скругленные углы.
Вы можете настраивать этот стиль, изменяя цвета, размеры, отступы и другие свойства в соответствии с вашим дизайном. Надеюсь, это поможет вам создать диалоговые пузыри с заголовками на вашем сайте.