Как сделать скошенные углы с помощью css?

Собственно, вся суть вопроса заключена в заголовке поста. Изображение должно иметь скошенные края и выглядеть следующим образом:

Ответ

Вариант с поворотами
Можно завернуть фото в обёртку и повернуть фото на 45 градусов в одну сторону, а обёртку — на 45 градусов в другую.
Чтобы уменьшить отрезанные уголки, фото уменьшаем, а обёртку увеличиваем в одинаковое количество раз.
http://codepen.io/glebkema/pen/YpWepz
.cut-corners { display: inline-block; height: 400px; width: 400px; overflow: hidden; position: relative; vertical-align: middle; } .cut-corners > div { height: 125%; width: 125%; /* = 5/4 */ overflow: hidden; position: absolute; top: -12.5%; left: -12.5%; transform: rotateZ(45deg); } .cut-corners > div > img { display: block; height: 80%; width: 80%; /* = 4/5 */ position: absolute; top: 10%; left: 10%; transform: rotateZ(-45deg); } .cut-corners.demo { background: orange; margin: 180px; overflow: visible; } .cut-corners.demo > div { background: yellow; }