пробовал делать 2 дива один прямоугольный второй наклоненный -webkit-transform: skew, но тогда не получается сделать заливку и внутреннюю тень, подскажите как можно это сделать? неужто только картинкой остается?
Невозможно силами CSS сделать то, что вам надо (одну геометрическую фигуру).
Но если начать как вы делали, то сдвигами элеменов и теней можно получить из двух дивов правдоподобный вариант.
Озвучте задачу целиком.
Все получилось, у пользователя SelenIT2 тень я сам добавил, спасибо за беспокойство ), к вашему варианту тоже можно легко добавить тень через box-shadow: inset 0px 0px 150px rgba(0,0,0,0.5); и все как надо!
