Можно ли нарисовать два фона, разделенных кривой, через css?
делаем svg. Разделяя две части кривой, потом заливаем обычным градиентом каждую из них.
По поводу кроссбраузерности: caniuse.com/#search=svg
Ну или дедовским способом, картинку на background
https://codepen.io/tedmcdo/pen/PqxKXg - вот кстати интересный пример
Как вариант: разбить фон на 2 элемента, прорисовать их в фотошопе(pixel perfect, само собой) с прозрачным фоном, и в стилях обозначив position: absolute, наложить друг на друга. 
А в чистом CSS как такое реализовать лично у меня нет даже намека на идеи. 
Хотя можно еще попробовать через Canvas.