Я кодирую шаблон транзакционной электронной почты, и он должен иметь заголовок с нижней границей с инвертированным радиусом границы (см. Прикрепленное изображение).
Первоначально я пытался сделать это с фоновым изображением, которое прекрасно работает, если: (1) пользователь, конечно, разрешает загрузку изображений, и (2) самое главное, электронная почта просматривается внастольный компьютер, потому что когда играешь с отзывчивостью (ширина ниже 600 пикселей), все становится действительно грязно
Используя изображение, я старался избегать использования сложного кода CSS, учитывая различные уровни поддержки в почтовых клиентах.Тем не менее, я думаю, что это может быть лучшим вариантом, чтобы избежать проблемы с отзывчивостью.
Я видел разные методы для достижения этой кривой.Например, чрезмерное наложение абсолютного элемента внизу элемента div со скрытым переполнением и корректировка значений радиуса границы.Не уверен, однако, если это стоило бы усилий.
Не могли бы вы помочь мне найти лучший способ решения этой проблемы с учетом ограничения количества электронных писем.
PS.Я был бы в порядке с не изогнутой нижней границей в качестве запасного варианта в тех случаях, когда клиент не может правильно отобразить радиус границы.
