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

1205

24 ноября 2016, 10:14

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

Answer 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; 
}

<div class="cut-corners"><div><img src="//placehold.it/400x400/936/fff/?text=cut%20corners" alt=""></div></div> 
 
<div class="cut-corners demo"><div><img src="//placehold.it/400x400/936/fff/?text=%20%20%20demo%20%20%20%20" alt=""></div></div>

Answer 2

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

* { 
  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%; 
}

<div class=""> 
  <img src="https://img3.goodfon.ru/original/1366x768/f/64/anita-sikorska-devushka-3093.jpg" lt=""> 
</div> 
 
<div class=""> 
  <img src="https://im3-tub-kz.yandex.net/i?id=43a29f50e02f2c4e25348e496aea3e5c&n=33&h=213&w=160" lt=""> 
</div> 
 
<div class="heard"> 
  <img src="http://picview.info/download/20150816/eyes-model-portrait-woman-blue-hair-2560x1600.jpg" lt=""> 
</div>

Answer 3

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

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); 
}