Верстка резанных углов [дубликат]

118

06 января 2021, 18:50

На этот вопрос уже даны ответы здесь:

Срезанные углы блока (4 ответа)

Закрыт 1 год назад.

Нужно сверстать резанный угол.Каким образом можно это реализовать? Сразу скажу линейный градиент не подходит.

https://prnt.sc/nsud5r

Answer 1

Уважаемый автор всё же поясню что на нативном css это делается именно на градиенте нам потребуется два блока первый и второй это который белый на котором мы расположим кота и все предложения

Вот здесь можете потренироваться: codepen.io/pen

В общем имеем блок с градиентом linear-gradient(135deg, transparent 30px, #000 0);

где ключевой момент именно 135deg + transparent 30px

html, 
body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  background: url(http://izhevsk.ru/forums/icons/forum_pictures/009986/9986516.jpg); 
} 
 
.items { 
  display: flex; 
  height: 100%; 
  align-items: center; 
  justify-content: center; 
} 
 
.item { 
  width: 220px; 
  height: 340px; 
  background: linear-gradient(135deg, transparent 30px, #000 0); 
  padding: 4px; 
  box-sizing: border-box; 
  margin: 10px; 
} 
 
.item-a { 
  width: 100%; 
  height: 100%; 
  background: #fff; 
  background: linear-gradient(135deg, transparent 30px, #fff 0); 
}

<div class="items"> 
 
  <div class="item"> 
    <div class="item-a"> 
 
    </div> 
  </div> 
 
  <div class="item"> 
    <div class="item-a"> 
 
    </div> 
  </div> 
 
  <div class="item"> 
    <div class="item-a"> 
 
    </div> 
  </div> 
 
</div>