Волнистый дизайн на границе div ⇐ CSS

[Anonymous]

Я пытаюсь клонировать интерфейсы некоторых проектов на dribble в учебных целях и улучшить свои навыки работы с CSS. Я выбрал макет ниже:


Как вы можете видеть, это мобильный интерфейс, но для его создания я использую React dom (как я уже упоминал ранее, это только для учебных целей).
Моя проблема связана с этими div с волнистой рамкой сверху и снизу макета, я пытался следовать некоторым руководствам, но мне не удалось это сделать.
Что я пробовал:
Сначала я попробовал css Чтобы решить эту проблему, используйте абсолютную позицию z-индекса для рендеринга элементов div, чтобы «скрыть» фиолетовый фон, но конечный результат был странным. Вот мой код:

Код: Выделить всё

import { Flex, useBreakpointValue } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';

const Curve = () => (




);

export function Login() {
return (






Content


);
}

Наконец, я прочитал, что могу использовать элементы SVG для этого, но конечный результат не реагировал на другие макеты. Я хотел бы использовать CSS для решения этой проблемы, потому что это цель этого клона. Возможно ли это сделать?

Подробнее здесь: https://stackoverflow.com/questions/790 ... div-border