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

#css #вёрстка

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


    

Ответы

Ответ 1

Вариант с поворотами

Можно завернуть фото в обёртку и повернуть фото на 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;
}





Ответ 2

Если вдруг не особо важны не самые свежайшие браузеры:



div {
  height: 280px;
  width: 200px;
  
  background: url('https://i.stack.imgur.com/bGmki.png') no-repeat center;
  background-size: 320px;

  -webkit-clip-path: polygon(
      25px 0%, calc(100% - 25px) 0%, 
      100% 25px, 100% calc(100% - 25px), 
      calc(100% - 25px) 100%, 25px 100%, 
      0% calc(100% - 25px), 0% 25px);
  clip-path: polygon(
      25px 0%, calc(100% - 25px) 0%, 
      100% 25px, 100% calc(100% - 25px), 
      calc(100% - 25px) 100%, 25px 100%, 
      0% calc(100% - 25px), 0% 25px);
}



Ответ 3

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



* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background: #fff;
}
img {
  display: block;
  width: 100%;
}
div {
  width: 30%;
  height: auto;
  margin: 3px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
}
div:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(http://maxim1978.0fees.us/images/border.png);
  background-size: 100% 100%;
}
.heard:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(http://maxim1978.0fees.us/images/heard.png);
  background-size: 100% 100%;
}