Веб дизайнер нарисовал полупрозрачное всплывающее окно, заказнику понравилось, и он захотел, чтобы выло сверстано именно так. Если бы окно было белым, но эту статью не было бы писать никакого смысла. Но окно то полу прозрачное и тут появилась засада в виде треугольника в низу окна.
К сожалению, в Webflow нельзя делать треугольные фигуры с помощью div блоков. И поэтому нужно что-то придумать чтобы убрать это наложение.
И если подумать это не так сложно, Webflow настолько гибкий сервис, что, если проявить смекалку можно сверстать практически любой дизайн.
Убрать это некрасивое наложение можно с помощью градиента. Выбираем наш будущий треугольник и заходим в настройки бэкграунда и выбираем градиент.
В настройках градиента разворачиваем его на 315 градусов для того, чтобы он был параллелен нижней границы окна.
Нижнему градиенту делаем белый цвет с непрозрачность 50 % (возможно непрозрачность Вашего окна имеет другие параметры, выставляйте как у Вас)
Верхнему градиенту делаем непрозрачность 100% , и не важно какой там цвет.
Теперь нам нужно сделать в градиенте резкий переход, для этого ползункам верхнего и нижнего градиента нужно выставить одинаковый параметр. В моем случае это 35%, Вы же погоняйте этот размер так, чтобы он совпал с нижней границей Вашего окна.
Ну вот и все, теперь всплывающее окно выглядит вот так.
Согласитесь так намного лучше!