Подскажите как сверстать прямоугольную трапецию

Question

[enchikiben]

пробовал делать 2 дива один прямоугольный второй наклоненный -webkit-transform: skew, но тогда не получается сделать заливку и внутреннюю тень, подскажите как можно это сделать? неужто только картинкой остается?

Answer 1

[mrspd]

Вот вам на будущее: css-tricks.com/examples/ShapesOfCSS/

Answer 2

[Николай Васильчук]

Невозможно силами CSS сделать то, что вам надо (одну геометрическую фигуру).
Но если начать как вы делали, то сдвигами элеменов и теней можно получить из двух дивов правдоподобный вариант.
Озвучте задачу целиком.

Comments

[enchikiben]

а что тут озвучивать, надо сделать то что на картинке… но так понял что без картинок необойтись

[Николай Васильчук]

Сделать как на картинке — вам предложили уже минимум 3 разных решения. Вам же надо еще какую то тень вроде?

[enchikiben]

Все получилось, у пользователя SelenIT2 тень я сам добавил, спасибо за беспокойство ), к вашему варианту тоже можно легко добавить тень через box-shadow: inset 0px 0px 150px rgba(0,0,0,0.5); и все как надо!