Как сделать такой пятиугольник в css?
Вот тут https://css-tricks.com/examples/ShapesOfCSS/ много примеров. Думаю будет достаточно, чтобы "въехать в эту кухню":)UPD
Чтобы внутри нормально располагался контент, была тень, бодер, прозрачность и т.д. - я бы наверно делал так:
1. Создал врапер с position: relative.
2. Внутрь положил 4 блока:
  - 3 блока это отдельные фигуры (у каждой своя роль) из ответа supertrolyaso наверно лучше подойдет, z-index 1, 2 и 3. Т.е. Нижний с filter: blur(2px) и смещен (тень), средний типа основа и верхний (внутренний бордер) ну можно transform: scale(0.9), или размеры поменять... background-color:transparent и border....
  - 1 блок для контента естественно. 
Но возможно и другой способ есть более простой. Хз.
Вот как вариант: https://codepen.io/anon/pen/YLyLmZ